Steps to Success
Tables allow you to arrange data into columns and rows.
Tables are block-level elements that contain content.
Therefore the table element requires an opening <table> and closing tag </table> to define the block/container/box.
The table must have at least one row.
Table rows are tr elements. Rows are block-level elements that must have opening and closing tags. <tr> </tr>
The table row must have at least one column.
Table columns are td elements. Columns are also block-level elements that must have opening and closing tags. <td> </td>.
A table with 1 row and 1 column looks like this:
<tr>
<td> content</td>
</tr>
</table>
A table with 1 row and 2 column looks like this:
<table>
<tr>
<td> col 1 </td>
<td> col 2 </td>
</tr>
</table>
A table with 2 row and 2 column looks like this:
<table>
<tr>
<td> row 1 col 1 </td>
<td> row 1 col 2 </td>
</tr>
<tr>
<td> row 2 col 1 </td>
<td> row 2 col 2 </td>
</tr>
</table>
Steps to Success
- Create a new file in Notepad and add the shell of HTML
- Save it as table.html
- Give the page a <title> and an heading <h1>
- Type the following HTML (or copy and paste) between the opening <body>and closing body tags </body>
<table width="80%" border="2" cellpadding="0" cellspacing="0">
<tr>
<td>Address</td>
<td>53 Applewood Lane</td>
</tr>
<tr>
<td>City</td>
<td>London</td>
</tr>
<tr>
<td>Province</td>
<td>On </td>
</tr>
<tr>
<td>Phone number </td>
<td>123-889-8765</td>
</tr>
</table>
The table attribute width indicates the width of the table.
The table attribute border indicates the thickness of the border lines. If you do not want a border, change the value to "0".
The table attribute cellpadding indicates how much empty space there will be between the cell contents its cell borders.
The table attribute cellspacing indicates how much empty space there will be between cell borders. - Save and preview in the browser to see the results.
