4.13. Introduction to HTML: basic structure, tags and attributes: Tables in HTML
Page 17 | Listen in audio
Introduction to HTML: basic structure, tags and attributes: Tables in HTML
HTML, or HyperText Markup Language, is the standard language for creating web pages and applications. Made up of a series of elements, or 'tags', HTML forms the structure of a web page and tells the browser how to display the content. In this section, we'll explore the basic structure of HTML, tags, and attributes, with a special focus on tables in HTML.
Basic Structure of HTML
An HTML page is made up of a series of nested elements. Each page begins with a declaration of the document type, which for HTML5 is simply . Next, we have the html tag that surrounds the entire content of the page, followed by the head and body tags.
The head tag contains metadata about the page, such as the title that appears in the browser tab, links to CSS stylesheets and JavaScript scripts. The body tag contains the main content of the page that is visible to users.
Example of Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Page content goes here.
</body>
</html>
HTML Tags and Attributes
HTML elements are defined by tags. A tag is composed of an element name, surrounded by angle brackets. Most HTML elements have an opening tag and a closing tag, with the element's content in between.
For example, to create a paragraph, we use the p tag. The opening tag is <p> and the closing tag is </p>. The content of the paragraph goes between these tags.
In addition, tags can have attributes, which provide additional information about the element. Attributes usually come in name/value pairs and are included in the element's opening tag.
Example of HTML Tags and Attributes
<p style="color:blue">This is a blue paragraph.</p>
In this example, style is an attribute of the p tag, and "color:blue" is the attribute value. This tells the browser to display the paragraph text in blue.
Tables in HTML
Tables in HTML are defined with the <table> tag, and consist of rows and cells. Rows are defined with the <tr> tag, and cells within rows are defined with the <td> for the data cells or <th> to the header cells.
Example of Table in HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
This example creates a table with two headers and two data cells. The result is a table with two columns and two rows.
Tables in HTML can also have attributes, such as 'border' to define the table border, 'width' and 'height' to define the width and height of the table, and 'cellpadding' and 'cellspacing' to define the space within and between cells.
Example of HTML Table with Attributes
<table border="1" width="100%" cellpadding="5">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
This example creates a table with a border of 1 pixel, a width of 100% of the page width, and an internal space of 5 pixels in each cell.
Now answer the exercise about the content:
What is the function of 'table', 'tr' and 'td' tags in HTML?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
18Introduction to HTML: basic structure, tags and attributes: Split and span tags
4 minutes
Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!
