Creating Tables
Creating Tables
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
Procedures to Practice
Procedures to Practice
Tables allow you to arrange data into columns and rows. You are not making a new file yet. These codes are just here to show you examples. Please read on.
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 (please note that you are not creating a new file yet...the codes below are just examples!):
<table>
<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>
Procedures to Practice
Procedures to Practice
Ok, now you are creating a new file. Create a new HTML file in Notepad. Remember, we are working in procedures right now!
ADD ALL OF THE REQUIRED / STANDARD HTML TAGS THAT ARE MISSING IN THE CODE BELOW SO THAT YOU WILL BE ABLE TO TAKE THAT CODE AND PLACE IT RIGHT INTO THE BODY. Save it as table.html in Procedures.
Give the page a <title> and an heading <h1> using the phrase 'My Table' for both.
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.
5. Save and preview in the browser to see the results.
Page updated
Report abuse