HTML Tables
In HTML, a table is a structure that organizes data into rows and columns. Tables are created using the <table> element, and the content of the table is defined using other HTML elements like <tr> (table row), <th> (table header), and <td> (table data/cell). Here's a basic example of an HTML table
Example
<!DOCTYPE html> <html> <title>Your Website Title<title> <body> <h2>Sample HTML Table</h2> <table border="1"> <tr> <th>Header 1<th> <th>Header 2<th> <th>Header 3<th> </tr> <tr> <td>Row 1, Cell 1<td> <td>Row 1, Cell 2<td> <td>Row 1, Cell 3<td> </tr> <tr> <td>Row 2, Cell 1<td> <td>Row 2, Cell 2<td> <td>Row 2, Cell 3<td> </tr> </table> </body> </html>You can click on above box to edit the code and run again.
Output
Sample HTML Table
| Header 1 | Header 2 | Header 3 | |||
|---|---|---|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 | |||
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
- The <table> element is used to define the overall table.
- Each row of the table is represented by the <tr> element.
- Table headers (the labels for each column) are defined using the <th> element
- Table data cells are defined using the <th> element.
<th> attribute in the <table> element is optional and adds a border to the table for better visibility; it's not typically used in production code.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
Example
<table> <tr> <th>Header 1<th> <th>Header 2<th> <th>Header 3<th> </tr> <tr> <td>Row 1, Cell 1<td> <td>Row 1, Cell 2<td> <td>Row 1, Cell 3<td> </tr> <tr> <td>Row 2, Cell 1<td> <td>Row 2, Cell 2<td> <td>Row 2, Cell 3<td> </tr> </table>You can click on above box to edit the code and run again.
Output
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
Example
<table> <tr> <td>Row 1, Cell 1<td> <td>Row 1, Cell 2<td> <td>Row 1, Cell 3<td> </tr> <tr> <td>Row 2, Cell 1<td> <td>Row 2, Cell 2<td> <td>Row 2, Cell 3<td> </tr> </table>
You can click on above box to edit the code and run again.
Output
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 | |||
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.