HTML Tables


In the early days of the Internet, Tables were the primary method of organising information on a web page. Now Cascading Style Sheets are generally used but tables are still relevant. A table comprises rows and columns that are described by Start and End Tags. For example rows are formed by <tr> and </tr> tags, whereas columns are created by <td> and </td> tags.


To add a table to your web page, type <table>, not forgetting the tag, </table>, at the end. In our example, copy the red text below to your work, not forgetting to Save it then refresh your browser.



<p>The content of my website is expanding and the I am learning how to make a word <b>bold</b> or emphasise it in <i>italics</i>. I could use <b><i>bold and italics</i></b></p>

<table>

<tr><th>This is the table heading</th></tr>

<tr><td> This is the first piece of information in the table. </td></tr>

<tr><td> This is the second piece of information in the table. At this time you are not able to see a border. </td></tr>

</table>

</body>

</html>



Your web page should now look like this Example.


You will notice that it does not look like a table. This is because there is no border. We will now create a border, add some shading and adjust the size of the table. This is done with in-line HTML code which will be explained below. Now overwrite the table code above with all of the HTML code below. The easiest way is to copy and paste, then Save and Refresh your browser.



<table border=1 cellspacing=2 cellpadding=10 width=700>

<tr><th colspan=2 bgcolor=silver>This is the table heading. It spans two columns using 'colspan' code</th></tr>

<tr><td width=70%> This is the first row and first column in the table. </td>

<td></td></tr>

<tr><td width=30%> This is the second row and first column in the table. </td><td> This is the second row and second column in the table. </td></tr>

<caption align="bottom"> Table 1: This is the caption for the table.</caption>

</table>



Your web page should now look like this Example.


Table Appearance


A few things have changed and are worthy of mention. First, the border has appeared and the table is now visible. The table has been given an overall width of 700 pixels and the first column has been defined as 70% of the table width and the second column is set as 30%. A table heading using the tags <th> and </th> spans the two columns by using the colspan in-line code. Also, the heading area has been shaded in using the bgcolor (background colour) inline code. A caption that describes the table has been added using the <caption> and </caption> tags. You will notice that the top right section is blank. You achieve this by not placing any text between the <td> and </td> tags.


Cell Spacing


You will notice the cell spacing and cell padding in the inline code. It is worth experimenting with these by changing the figures to see the effect produced. For example, change the cell padding to 30 and see what happens! You can change the table borders, colours, spacing, padding etc to suit the needs of your website.



>>Next - Lists in HTML>>



Summary of HTML Tips so far


Use small letters throughout your HTML code

Save your webpages using the .html file extension.

Refresh your browser to see the changes that you have made.

Ensure HTML tags are in the correct order.

Ensure HTML code is written in US English.

The front page of a website should be saved as 'index.html'.

Use percentage or the em method to define font sizes.

Use <br /> tags to create whitespace.

Use <td></td> tags to create a blank table cell.


Summary of HTML Tags


<a>

Anchor Tag for creating links.

<b>

Bold tag.

<br />

Break tag.

<body>

Designates the body of the web page. Must come after the </html> tag.

<caption>

Adds a caption to a Table.

<h1>

Heading tag number from 1 to 6, with h1 having the largest font.

<html>

Designates the document as a web page.

<i>

Italics tag.

<p>

Paragraph tag.

style=

Used within the <p> tag to define font type, colour and size.

<table>

Adds a Table to the web page.

<td>

Table data in the table cell.

<th>

Table heading.

<tr>

Defines a Table row.

<u>

Underline tag.