2
X
2
Table
Example
Assignment is to create a 2x2 table with one cell being your name, one cell your class period, and two cells explaining cell padding and cell spacing.

 

<html>
<head>
<title>Tables</title>

</head>

<body>
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="100%" border="10" cellspacing="5" cellpadding="5">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
</body>
</html>

 

Terms

 

Table cell padding and spacing!

This table does not have any padding of any kind (except my words!)

No padding here, I'm afraid! When we put a lot of text in a table then we find that the text tends to brush up to the border of the table and it looks a bit cramped.

However, we can fix it with a bit of padding.

However, this table has cell padding!

This is the code in the table; <TABLE BORDER="5" CELLPADDING="20"> When we put a lot of text in a table then we find that the text tends to brush up to the border of the table and it looks a bit cramped.

Cell padding puts some space between the border of the cell and the text. Aren't I much prettier than before? Well, you know what you can do then. Put your own values in!

And this table has cell spacing!

This is the code in the table; <TABLE BORDER="5" CELLSPACING="20"> When we put a lot of text in a table then we find that the text tends to brush up to the border of the table and it looks a bit cramped.

Cell spacing puts some space between the cells themselves in the table.

And this little pig, er table, had all the padding and spacing it wanted!

This is the code in the table; <TABLE BORDER="5" CELLPADDING="20"> When we put a lot of text in a table then we find that the text tends to brush up to the border of the table and it looks a bit cramped.

Cell padding puts some space between the border of the cell and the text. Cell spacing puts some space between the cells. This table has both.

Did you notice that I put rather big values in for the padding, and for the border, so it was very clear what was going on? It is a good idea to be brave and try a few things. Be outrageous, and you'll find out how things work!

BreBru.Com Extra Information Technology HTML

 

1