Tables in HTML
Contents |
Tags [edit]
Tables in HTML are relatively simple to create and modify. This is done using the tags:
- <table> to declare a table.
- </table> to end the table.
- <tr> to declare the start of a new row.
- </tr> to declare the end of a row.
- <td> to declare a cell.
- </td> to close a cell.
Use [edit]
The code:
<table>
<tr>
<td>TITLE 1</td>
<td>TITLE 2</td>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |
Modifications [edit]
Width [edit]
To control table width, width = "'''x'''" can be added to the <table>, replacing x with the desired width, in pixels or %.
eg <table width="100"> will generate a 100px wide table.
| # | # |
Border [edit]
To adjust border width, add border = "'''x'''" to the <table> tag, with x replaced with the desired border width in pixels.
eg <table border = "1"> will generate a table with border width 1px.
| # | # |
Divider Lines [edit]
To choose where divider lines appear, rules is added to the <table> tag, with one of the following arguments:
- none
- groups
- rows
- cols
- all
eg <table rules="cols"> will return a table with only columns divided.
| # | # |
| # | # |
NB: This only works with a visible border, ie border width>0px.
Frames [edit]
To hide one or more sections of border, frame is added to the <table> tag, with one of these arguments:
| *void | shows no border |
| *above | shows border only on top side |
| *below | shows only on bottom side |
| *hsides | shows only on top+bottom |
| *lhs | shows only on left side |
| *rhs | shows only on right side |
| *vsides | shows only on left+right sides |
| *box | shows on all sides |
| *border | shows on all sides |
eg <table frame="lhs"> will return a table with border only on the left side.
| # |
Cell Padding [edit]
To control the amount of padding between the contents of a cell and its borders, use cellpadding="x" to the <table> tag, with x as the amount of padding you want, in pixels or %. eg <table cellpadding="10"> will draw a table with 10px cell padding.
| # |
Cell Spacing [edit]
The space between cells is controlled the same way as cell padding, only with cellspacing="x" used instead.
eg <table cellspacing="5"> will draw a table with 5px cell padding.
| # | # |
| Learning HTML |
| Previous: Lists in HTML — Next: Forms in HTML |
