Samantha Coaker's HTML Tutorials

How to create a table.

There are an incredible number of different things you can do on a table, so I'm just going to tell you how to do a few.

Tables are also incredibly useful, can be used to display data, line up text, they can also be very important in the design of a webpage.

Above is a basic code for a table, a table similar the one the code is displayed inside.

The border attribute determines the thickness of the table wall. Set it to 0 and the table will be invisable.

The height and width attributes, like when used in the image command, determine its size. All measurements are in pixels.

To create more columns insert extra <td> </td> tags. Each one of these tags creates a new cell. It is within these tags you insert your tables data. To create a new line of columns open a <tr> tag, then insert your <td> </td> inside it. Close the <tr> tag when you want the row to end. Repeat as necessary.

There are many other attributes that can be added to the table, tr and td tags but we will only cover a few which you will need here.

bordercolor. Insert this attribute into the opening table tag. Type the colour you wish to use in the quotation marks (either colour names or hex codes.) e.g

<table border="1" bordercolor="blue">
<tr>
<td> Text.</td>
</tr>
</table>
Would look like this.

cellspacing. You can decided how much space you want between each cell. e.g.

Would look like this.

cellpadding. You can also decide how much space goes between the cell edge, and the text inside. e.g

Would look like this.

You can put pretty much whatever you want into a tables cell. You can format your text (as I have done in each example to keep my formatting, I've just excluded it from the code I've shown you.), insert hyperlinks and images. Hell, you can even put a table inside another table. Just do as above and insert it in between the <td> </td> tags. Another useful thing you can do is change the background colour or give it a background image.

bgcolor is an attribute for either your <table> tags or your <td> tags. In this example I have applied it to the<td> tag. Applying it to the <table> tags would send the command through the entire table. e.g

<table border="1">
<tr>
<td bgcolor="blue"> Text.</td>
</tr></table>
Would look like this

background is another one that can be used in both your <table> tags or your <td> tags. In this example I have applied it to the<td> tag. Applying it to the <table> tags would send the command through the entire table. e.g

Your text will appear over the image. This is why it is different to simply using the image command.

Another table data attribute is colspan. Say if you wanted a table which had one row of 4 cells and the next row with only 2 cells. Normally, without colspan, this would display as:

Text.	Text.	Text.	Text.
Text.	Text.

What you need to do is tell the bottom two cells is to span across two columns. e.g:

Text.	Text.	Text.	Text.
Text.		Text.

The code for that is:

Similarly, use rowspan if you wanted a column that spanned 3 rows of your table like this:

Text	Text.	Text.
	Text.	Text.
	Text.	Text.

Here's the code:

As these three attributes can be inserted into the table data tags, you can combine them as they are individual to each cell. For example this means you can have a different colour or picture (or use both attributes in the same table) in each cell or use a combination of the span commands.