Hyper Text Markup Language: html

More on tables:

You can define the size (width and height) of a table. The size can be defined in pixels or as a percentage of the size of the page.

On the previous table, the opening table tag defined that the width should be 300, <table width="300"
It meant 300 pixels.

On the table below the width has been set to 100% of the page (100% of the size of your browser window, whatever that is)

<table width="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

See below a table with width set to 90% of the page.

<table width="90%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000">&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#FF0000">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

#000000 is the hexadecimal value for black

#FF0000 is the hexadecimal value for red

In this case, the color is the attribute's value for the attribute BACKGROUND color (bgcolor).

That is why is writen in quotes ( attribute = "attribute's value)

<td bgcolor="#000000">&nbsp;</td>

The code &nbsp; doesn't mean anything. It is an invisible special character and it is used in empty cells of tables as a way of "keeping the cell open" (cells with no content will collapse).

I have omited here the use of cellspacing and cellspacing as attributes of a a <table> tag

You can know more at:

http://www.htmlcodetutorial.com/tables/index_famsupp_29.html

You can use a graphic file to hold the size of a cell.

In this case we used the image called "little-cube.gif". the image is 51 X 48 pixels.

The gif-image on the upper left is maintaining the size of the cell (51 X48)
the cell has been set to the exact size of the image:

For tables with irregular cell sizes I am using a transparent-gift hat is 1 X 1 pixel big.
Photoshop uses this trick to keep tables with an exact size. It usually calls it "spacer.gif"
The 1X1 pixel gif gets placed and resized to whatever size is needed to maintain the cell-sizes.

Here a simple example of this:

The third cell of the upper row is kept with width=120 pixels, because I have placed a transparent gif inside and I have resized to 120 X 47 pixels (go to the cell, click and drag the content to your desktop).

The fourth cell of the upper row is kept with width=80 pixels because I have placed there the same transparent gif and I have resized to 80 X 47 pixels.

The second row is kept 90 pixels height because I have placed there the same transparent gif and I have resized to 40 X 90 pixels.

I can also merge several cells in a table (look at the turquoise one on the left upper-side)

In html this is called: "spanning 2 columns" (colspan=2 in the code)

this cell has a colspan=2

This is rowspan=3 (the third cell of the first row is "spanning over 3 rows"