Your assignment is to create a 3x2 table with pictures of buildings in each cell. Each picture is to be the same size.

Table Example

 

<html>
<head>
<title>Tables 3 by 2</title>
</head>

<body>
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="80%" border="10" cellspacing="5" cellpadding="5">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<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