Tables are one of the most important and powerful tools for any web page. Only the simplest of web sites can look right without the use of tables. A table is commonly used as a matrix or grid. They are also great for keeping text in line with pictures. Especially if the pictures vary in size, there may be no other way to get your page to look right. Many websites with multiple columns use tables within tables to keep everything lined up and separated neatly.
Tables in HTML seem to baffle people. But if you break them down into their components, they are really quite simple.
A Simple Table:
To tell the browser your are beginning a table, use the Table tag (
Using the example, above, the browser will make the table as small as possible to fit the material in. If you want to spread it out some more, you can adjust the table width by "hard-coding" the desired width in pixels, or by a percentage of available screen width.
will make the table span 400 Pixels wide.
You will want to be careful when forcing tables to have a certain width, because some people still have smaller screen resolutions and your tables may look awry.
You can make the individual columns (cells) different widths as a percentage of the table width, or fixed pixel width as well:
You can change the text alignment.
Large amounts of text or large images:
If the contents of the cells in your HTML table are of markedly different size, the text in the smaller of the cells will be aligned centered top to bottom. A very common reason for needing to fix the vertical alignment is if you have a caption or description in one column, and a large picture in the column next to it. If this does not look right, you can change the vertical alignment to make it line up at the top of the cell:
Table Borders in HTML
Left to their own devices, most web browsers will put a 1 pixel wide border around the cells by default. You can make a borderless table by specifying or you can make the border thicker by increasing the border. For example,
You can change the border color if you'd like. You can use plain English words for the border color, or the RGB function, but they may not work on all browsers. The safest way is to use the Hexadecimal notation for the actual color. This gives a finer control over the color.
Color Name: will make the border a dark blue color
RGB Function: will make a bright pink border
Hexadecimal: will make the border a lime green color
A good resource for HTML color names and their hexadecimal equivalents can be found at w3schools.com/tags/ref_colornames.asp
Summary:
This is only a basic introduction to HTML tables. You can do much, much more with tables. For example, you can define header rows that will stay in place when scrolling up and down on very long tables.
You can set the background color for the entire table.
You can change the background color of the individual cells, and much more.
