Tables in HTML - HTML Road Map
HTML tables are used to present data in a tabular
format, making it easier to read and understand. They are created using HTML
tags, such as the "table" tag for the container, "tr" for
table rows, "td" for table cells, and "th" for header
cells.
Here is an example of a simple HTML table:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This would result in the following table:
|
Header
1 |
Header
2 |
|
Row 1,
Column 1 |
Row 1,
Column 2 |
|
Row 2,
Column 1 |
Row 2,
Column 2 |
You can also use CSS to style and format the table, such as
adding borders, changing the background color, and adjusting the width and
height of cells.
HTML tables are used to present data in a tabular format and
are created using HTML tags. They are widely used to display data in a clear
and organized manner.
Here is a comprehensive guide to HTML tables, from basics to
advanced techniques:
Basic
HTML Table Structure:
The basic structure of an HTML table consists of the "table" tag as the container, "tr" for table rows, "td" for table cells, and "th" for header cells. Here is an example:
1. Table Header:
The "th" tag is used to create a header cell in an HTML
table. It is typically used in the first row of the table and is used to label
the columns.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
2. Table Rows and Cells:
The "tr" tag is used to create a table row, and the
"td" tag is used to create a table cell. The "td" tag
contains the data for each cell in the table.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
3. Spanning Rows and Columns:
You can span rows and columns in an HTML table using the
"rowspan" and "colspan" attributes. The "rowspan"
attribute is used to specify the number of rows a cell should span, and the
"colspan" attribute is used to specify the number of columns a cell
should span.