This section lists the tags often used with HTML tables: <table>,
<tr>, and <td>.
<table>
The <table> tag specifies the presence of a table. This is very often
used in conjunction with the <tr> and the <td> tags. The following
attributes are commonly used to define the properties of this table:
- width: This specifies the width of the table. Can be specified in pixels or in relative terms (for example, 100%).
- border: This specifies whether the table will have a border. The number indicates the thickness of the border.
- cellspacing: The amount spacing between the cell wall and the cell border. The area enclosed by the cell walls are the maximum amount of area that text can be displayed in a cell.
- cellpadding: The amount padding between cells and the each cell wall in a table.
- bgcolor: This specifies the background color for this table. The color
value may be specified as the color name or the six-character color code.
<tr>
The <tr> tag specifies the presence of a row. The following attributes
are commonly used to define the properties of this row:
- bgcolor: This specifies the background color for this row. The color
value may be specified as the color name or the six-character color code.
- height: This specifies the height of the row.
- rowspan: This specifies the number of rows this particular row occupies.
<td>
The <tr> tag specifies the presence of a column. Columns are specified
within each row. The following attributes
are commonly used to define the properties of this column:
- valign:
- width: This specifies the width of the column. Can be specified in pixels or in relative terms (for example, 50%).
- bgcolor: This specifies the background color for this column. The color
value may be specified as the color name or the six-character color code.
- colspan: This specifies the number of columns this particular column occupies.
Example 1
HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |
Example 2
HTML:
<table border=1 width=500>
<tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |
Example 3
HTML:
<table border=1 width=500>
<tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |
Example 4
HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td colspan=2>Element 4</td><td>Element 5</td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 |
Example 5: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=10 cellpadding=0>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |
Example 6: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=0 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |
Example 7: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=10 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |