Tables

About html Color Images and Links Lists Tables My Horses Index

Info on Tables

You start with a <table> tag and always end with a </table> tag.
Start each row with <tr> and end the row with </tr> (tr stands for table row).
Every cell has a <td> and a </td> (td stands for table data).
So, you define the row and then dictate how many cells that the table will have.

The table will fit whatever you put in it, but otherwise it will look squished.
To fix this, you can put width= "25%" inside the table tag and the table will be on quarter of the page wide, no matter what size the page is.
You can also put just a number (pixels) and the table will resize as well.
To put a border around the cells of the table, put border="2" inside the table tag. You can change the number to make the border larger or smaller.
Another way to fix the size of tables is cellpadding="10" inside the table tag. Again, you can make the number, which expresses pixels, whatever you want. This puts that amount of pixels all the way around the content of the cell.
Cell spacing puts more space between cells. To use this, put cellspacing="10" inside the table tag. Again, you can change the number of pixels to fit your needs.
Cell padding is often used because it leaves room all around the contents of the cells, rather than just width or space between them.

You can put bgcolor="samplecolor" inside the table, tr, or td tag to change the background color of the whole table, one row of cells, or one cell.
You can also use an image as a table background. You just write bgcolor= "sampleimage.jpg" inside the table tag.
The color tag for the row or cell will override the tag for the whole table.

You can also merge cells in a table vertically or horizontally. This is useful for a label or picture, because it allows for text flow.
The tag to merge cells across rows is rowspan.
The tag to merge cells across columns is colspan.
However, these seem backwards because colspan seems like a row and rowspan seems like a column. These tags go inside the td tag.
You can also put an align="center" in the td tag to keep the text in the middle (or other direction) of the cell.
If you put the align="center" inside the table tag, it will align the table in the center of the webpage.

Examples:

Table sized by width percent:

1	2	3	4
5	6	7	8

Table sized by cell padding:

1	2	3	4
5	6	7	8

Table sized by cell spacing:

1	2	3	4
5	6	7	8

Colors in tables:

A	B	C	D
E	F	G	H

Using the colspan tag:

1
2	3	4	5
6	7	8	9

Using the rowspan tag:

1
	2	3	4	5
	6	7	8	9

Table with an image as background (and solid color for the second row):

1	2	3	4
5	6	7	8

One More Example (:

Favorite Cereals
Cold:	Kashi Granola	Froot Loops
Hot:	Oatmeal	Grits

Maria 3/23/10