HTML Tables
Tables organize data into rows and columns.
Use tables for real tabular data such as prices or schedules, not for page layout. A table is built from rows, and each row is built from cells.
Table Elements
- <table> wraps the whole table.
- <tr> defines a table row.
- <th> is a header cell, usually bold and centered.
- <td> is a normal data cell.
A Basic Table
A small table
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Asha</td>
<td>Designer</td>
</tr>
<tr>
<td>Ravi</td>
<td>Developer</td>
</tr>
</table>
</body>
</html>Spanning Cells
A cell can stretch across columns with colspan, or across rows with rowspan.
colspan
<!DOCTYPE html>
<html>
<body>
<table>
<tr><th colspan="2">Menu</th></tr>
<tr><td>Coffee</td><td>$3</td></tr>
<tr><td>Tea</td><td>$2</td></tr>
</table>
</body>
</html>Note: The first row is usually a header row of <th> cells so readers know what each column means.
Exercise: HTML Tables
Which tag defines a single row in an HTML table?
