Table of Contents
ToggleA simple HTML table:
Here is an example of a simple HTML table with two rows and three columns:
<table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
HTML Table: In this example, the<table>
element is used to create a table. The first row is created with the<tr>
(table row) element, and the column headers are created with the<th>
(table header) element. The second and third rows are created with the<tr>
element, and the data cells are created with the<td>
(table data) element.
Theth
element is used to create a header cell for each column, while thetd
element is used to create a data cell for each row and column. The table is displayed with a border by default, but this can be removed using CSS.
Table Cells
Table cells are the individual rectangular areas within a table that contain data or other content. In HTML, table cells are created with the<td>
(table data) element. Table cells can contain text, images, links, or other HTML elements.
Table cells are usually grouped together into rows using the<tr>
(table row) element. A table row is a horizontal grouping of table cells that are aligned with one another vertically.
Table cells can also be used for header information using the<th>
(table header) element. The main difference between the<td>
and<th>
elements is that the latter is used for header cells, which are typically displayed in bold and centered by default.
Here is an example of a simple HTML table with two rows and three columns:
<table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
HTML Table: In this example, the<td>
element is used to create a data cell for each row and column, while the<th>
element is used to create a header cell for each column.
Table Rows
In HTML, a table row is a horizontal grouping of table cells (<td>
or<th>
elements) that are aligned with one another vertically. Table rows are created with the<tr>
(table row) element.
Here is an example of a simple HTML table with two rows and three columns:
<table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
In this example, there are three rows, each with three columns. The first row contains the column headers (<th>
elements), while the second and third rows contain the data cells (<td>
elements).
Table rows can be styled with CSS to change their appearance. For example, you can change the background color of a table row by targeting thetr
element in your CSS code:
tr { background-color: #f2f2f2; }
This will set the background color of all table rows to a light gray color (#f2f2f2
).
Table Headers
In HTML, a table header is a special type of table cell (<td>
element) that is used to represent the header information for a column or row. Table headers are usually displayed in bold and centered by default, and are created with the<th>
(table header) element.
Here is an example of a simple HTML table with two rows and three columns, where the first row contains the column headers created with<th>
elements:
<table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
HTML Table: In this example, the first row contains the column headers, which are created with the<th>
element. The second and third rows contain the data cells, which are created with the<td>
element.
Table headers can also be used to represent header information for a row, by placing<th>
elements in the first column of each row:
<table> <tr> <th>Header 1</th> <td>Data 1, Column 1</td> <td>Data 1, Column 2</td> </tr> <tr> <th>Header 2</th> <td>Data 2, Column 1</td> <td>Data 2, Column 2</td> </tr> <tr> <th>Header 3</th> <td>Data 3, Column 1</td> <td>Data 3, Column 2</td> </tr> </table>
HTML Table: In this example, the first column of each row contains the row headers, which are created with the<th>
element. The remaining columns contain the data cells, which are created with the<td>
element.