HTML 101 – Tables Or Grids in HTML

0
14

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 ( ). Tables have rows and cells (columns). To start a new row, use the tag To start a new cell, use the tag. To end a cell, use; to end the row, use; and to end the table use Here is a simple 3×3 grid in HTML

Name Salary Marital
Steve 200.00 Single
Maria 275.00 Married

Making the table look just right.

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 80% of the available screen width.

will make the table span 400 Pixels wide.

You will want to be careful when forcing tables to be 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.

Leave a Reply