Table Attributes

border, cellpadding, cellspacing, width, height


Now that we know how to write the codes for basic rows and columns, we shall go on and learn more about other things that go inside the <table> tag. These are called attributes. Attributes are characteristics of something. For instance, you have a shirt which is white, medium size, and long sleeved. The object itself is the shirt, while the attributes of the shirt are white color, medium size, and long sleeves.


border

This goes in the table tag as follows, <table border="0">
This adds a border around your table. See the examples below:

border is set to 0
border is set to 5
border is set to 10

You can see how the size of the border increases as the value is increased.

Question: What are the practical uses of a table without borders?

Table without borders can be used to arrange text, pictures, etc, neatly on a page. See the following example:

This text was arranged into three columns using tables. This text was arranged into three columns using tables.This text was arranged into three columns using tables.

The codes for the above are

<table border="1"><tr><td> This text was arranged into three columns using tables.</td><td> This text was arranged into three columns using tables.</td><td>This text was arranged into three columns using tables.</td></tr></table>

Now take away the border by making the value equal to zero, and the result will be as follows

This text was arranged into three columns using tables. This text was arranged into three columns using tables.This text was arranged into three columns using tables.

The codes for the above are

<table border="0"><tr><td> This text was arranged into three columns using tables.</td><td> This text was arranged into three columns using tables.</td><td>This text was arranged into three columns using tables.<</td></tr></table>

The trick above could be used to arrange other things on the page, eg. images.

Question: How can a table be used to arrange images on a page?



The codes for the above are

<table border="1"><tr><td> <img src="table_tut.gif"></td><td><img src="table_tut.gif"></td><td><img src="table_tut.gif"></td></tr></table>

Now take away the border by making the value equal to zero, and the result will be as follows

The codes for the above are

<table border="0"><tr><td> <img src="table_tut.gif"></td><td><img src="table_tut.gif"></td><td><img src="table_tut.gif"></td></tr></table>

Hands on Practice Write the codes for a table used to arrange the images below:



Solution
<table>
<tr>
<td><img src="table_tut.gif"></td>
<td><img src="table_tut.gif"></td>
</tr>
<tr>
<td></td>
<td><img src="table_tut.gif"></td>
</tr>
</table>


cellpadding

This goes in the table tag as follows, <table cellpadding="0">
Cellpadding adds space between the borders of your table and the contents inside the cells. See the examples below:

Cellpadding is set to 0
Cellpadding is set to 5
Cellpadding is set to 10


You can see how the space between the borders and the contents increases as the cellpadding value is increased.
The codes for the above are

<table cellpadding="0" border="1"><tr><td>Cellpadding is set to 0</td></tr></table>
<table cellpadding="5" border="1"><tr><td>Cellpadding is set to 5</td></tr></table>
<table cellpadding="10" border="1"><tr><td>Cellpadding is set to 10</td></tr></table>


Question: How can cellpadding be useful?

It can be used for many purposes. You'll develop the use as you become an expert in using tables.

As an example, consider the codes we used to arrange images above. What would happen if we added cellpadding?


The codes for the above are

<table cellpadding="0" border="0"><tr><td> <img src="table_tut.gif"></td><td><img src="table_tut.gif"></td><td><img src="table_tut.gif"></td></tr></table>

Now what happens if we add cellpadding with a value of 15?

The codes for the above are

<table cellpadding="15" border="0"><tr><td> <img src="table_tut.gif"></td><td><img src="table_tut.gif"></td><td><img src="table_tut.gif"></td></tr></table>

Previous Next