Help With Html Tables

Basics

Tables organize data in columns and rows, like in a spreadsheet. For example, consider how the information in the table below is organized:

• Basics
• Examples
• HTML and web design help and support.
• HTML and web design help.

The above chart was created with the following source code.

HITS	MONTH	TOTAL INCREASE
324,497	January 1998	-
436,699	February 1998	112,172

What does it all mean?

Size of the border (1 pixel), line style (solid), and color (black).Start the first row.Theis to end the first column. The b statement is making the text bold. The same applies for the next two lines.Ends the first row. The next three lines are similar to what was explained above.Similar to the earlier td except the content is centered. The next six lines are similar to what was explained above.

HITS	statement is to start the first column and
-

Ends the table without transforming the remainder of the document into the table.

Examples

Example 1

1	2	3
4	5	6
7	8	9

1Td is declaring a new cell, as explained in basics. The style="background-color:#FFFF00" is telling the browser what color to display the cell as; #FFFF00 would be yellow; you also could write in yellow. For more on colors, view our color codes page.

• Example 1
• Example 2
• Example 3
• Example 4
• Example 5

Example 2

The above image is three different images put in a table that is at 100% of the section of the screen. Below is the source code used for the above example.

The most important part of the above is the first line with style="width:100%" attribute. The style indicates the table needs to be 100% of the open screen or container.

Example 3

One way to post images and text right next to each other is to use a table. The below source code shows how we did the above. We condensed our statement to make it look less intimidating.

STATEMENT SHOWN ABOVE

The style=“vertical-align:top” tells the browser to align the starting of the text at the top of the image. The vertical-align property can also be one of: middle, bottom, text-top, text-bottom, baseline, sub, super, and several others.

Example 4

Computer Hope

This simple outline effect is created by specifying the style border:"10px solid gray". The border is ten pixels wide, and colored gray.

Although this can be done with a table, we recommend using CSS, see: How to create images that are right-aligned on a web page.

Example 5

WEB PAGE	DESCRIPTION	HITS	MONTH
ComputerHope	Main page linking to all pages	3912	Feb 98
Cool Tricks	HTML cool tricks	2514	Feb 98

Related information

• See our table definition for further information and related links on this term.