Table skeleton
Build a simple table with <table>, <tr> and <td>.
What is a table?
An HTML table shows data in rows and columns. Sports results, price lists and monthly calendars are good examples. It is built from three core tags: <table> opens the table, <tr> is a row (table row), and <td> is a cell (table data).
A simple two-row table starts like this: <table><tr><td>Coffee</td><td>20 TL</td></tr></table>. Cells read left to right; rows read top to bottom.
A price list example
A simple two-row, two-column price list is written like this:
<table>
<tr>
<td>Coffee</td>
<td>20 TL</td>
</tr>
<tr>
<td>Tea</td>
<td>15 TL</td>
</tr>
</table>Each row is a <tr>; inside it you write one <td> per column. Indentation improves readability but is not required by the browser.
Exercise Write a two-row table
Add a <table> to body. It should have at least one <tr> row; each row must contain two <td> cells. For example a price list: Coffee / 20 TL and Tea / 15 TL.
Show example solution
<body>
<table>
<tr>
<td>Coffee</td>
<td>20 TL</td>
</tr>
<tr>
<td>Tea</td>
<td>15 TL</td>
</tr>
</table>
</body>Test yourself
-
Which tag opens a row in a table?
- <table>
- <td>
- <tr>
- <row>
Show answer
<tr> — Correct. <tr> (table row) represents one row.
-
Close the cell
<table> <tr> <td>Coffee</td> <td>Tea____ </tr> </table>Show answer
<table> <tr> <td>Coffee</td> <td>Tea</td> </tr> </table> -
Match each tag to its role
- <table>
- Table container
- <tr>
- Row
- <td>
- Cell
- <ul>
- Unordered list container