Tables arrange data in rows and columns, and forms collect input from visitors. Both are core HTML skills — edit the live examples and press Run to see them.
1Building a table
A table uses four tags: <table> (the table), <tr> (a row), <th> (a header cell), <td> (a data cell). Common attributes:
| Attribute | Controls |
|---|---|
border | The gridline thickness |
cellpadding | Space INSIDE each cell (around the content) |
cellspacing | Space BETWEEN cells |
align / width | Alignment / overall width |
Edit and Run:
index.html
Preview
Key points
- <table> holds the table; <tr> a row; <th> a header cell; <td> a data cell.
- border sets gridlines; cellpadding is space inside a cell; cellspacing is space between cells.
- Cells are written inside rows, left to right.
2Merging cells
To make one cell cover several rows or columns:
colspan="n"— stretch across n columns (horizontally).rowspan="n"— stretch down n rows (vertically).
Run this to see a merged title cell:
index.html
Preview
Key points
- colspan="n" spans a cell across n columns (horizontally).
- rowspan="n" spans a cell down n rows (vertically).
- Cells covered by a span are not written again.
3Simple forms
A <form> collects input. Common fields use the <input> tag with a type:
| Field | HTML |
|---|---|
| Text box | <input type="text"> |
| Checkbox | <input type="checkbox"> |
| Button | <input type="submit"> or <button> |
Run this small form:
index.html
Preview
Key points
- A form's fields live inside <form> ... </form>.
- <input type="text"> is a text box; type="checkbox" is a checkbox.
- A button is <input type="submit"> or <button>.
★ Practical: a results page
Build one HTML page that has:
- A table with a header row and at least two data rows.
- A title cell that spans all columns using colspan.
- A cell that spans two rows using rowspan.
- A small form with a text box, two checkboxes and a button.
Ready for the chapter test?
Answer 5 questions. Score 60% or more to mark this chapter complete.
Start the test →💡 Log in to save your progress and earn the certificate.