16 September 2017

Html Tables

Html Tables








Tables - An Introduction

Tables are used two ways in HTML: to display charts (what the designers of the <TABLE> tag originally intended it for); and as a means of controlling the layout of information on a web page. Although creating tables can be challenging, because readers of this tutorial will only be modifying information on existing web pages, all that is required is a basic understanding of the key elements and attributes which make up a table.
Explanation of Table Tags

<TABLE>...</TABLE>   Encloses the table. The TABLE tag has the following variable attributes: "BORDER=" Specifies the thickness of the border around the table. When using a table to control a page's layout, the border is usually set to zero.
"CELLPADDING=" Defines spacing within cells.
"CELLSPACING=" Defines spacing between cells.
"WIDTH=" Specifies the width of a table; typically given as a percentage of the total browser window space available.
<TR>...</TR>   Specifies a table row within a table. You may define default attributes for the entire row. These are: "ALIGN=" (either LEFT, CENTER, or RIGHT)

"VALIGN=" (either TOP, MIDDLE, or BOTTOM)

"BGCOLOR=" Sets the background color of a table row (see
Lesson 1 for more information on choosing colours).

"WIDTH=" Specifies the width of a row; typically given as a percentage of the total space available.
<TD>...</TD>   Specifies a table data within the table row. The attributes for table data are: "ALIGN=" (either LEFT, CENTER, or RIGHT)

"VALIGN=" (either TOP, MIDDLE, or BOTTOM)

"BGCOLOR=" Sets the background color of the TABLE cell (see Lesson 1 for more information on choosing colours).

"WIDTH=" Specifies the width of a table row. Typically given as a percentage of the available space.
Explanation of Table Structure

Just as HTML documents have a basic structure, so too do tables:

<TABLE>

<TR>

<TD>This is the table data cell #1</TD>
<TD>This is the table data cell #2</TD>

</TR>

</TABLE>
Below are samples of the various <TABLE> tags and their respective browser display:
HTML Code   Browser Display
<TABLE BORDER=1 CELLPADDING=2 CELLSPACING=2>

<TR>

<TD>This is the table data cell #1</TD>
<TD>This is the table data cell #2</TD>

</TR>

</TABLE>
 
This is the table data cell #1 This is the table data cell #2
Two further notes about the creation of tables: Firstly, tables are often "nested" within each other as a means precisely controlling the layout of information on a page. Secondly, in order to make a table cell appear empty, some form of place holder must be inserted, be it the ASCII code for a blank space ( ) or perhaps a GIF consisting of a single pixel the same colour as the cell's background.

Start typing and press Enter to search