Objectives of this Tutorial
Generally: To be able to create, modify and format a table in an HTML document
Specifically: On completion of this lesson, you will be able to:
- Create a table
- Add a border to a table
- Change the colour of the border
- Set the width of the table
- Centre a table on the page
- Merge cells across a column
- Align the contents of a cell
- Control the amount of space in and around a cell
- Change the colour of a cell
- Place a background image in a cell
Tables mainly tend to be used to display text in columns, rather like a newspaper layout. They can also be used to display tabular data.
Create a Simple Table
Tables are made up of rows of cells, the number of cells that you have in each row will determine the shape of the table.
To create a simple table
- Position the insertion point where you want the table to be displayed on the page
- Type <TABLE>
- Type <TR> (this tag is used to define the beginning of the first row)
- Type <TD> (this tag is used to define the beginning of the cell)
- Type in the text that you want to be displayed in this cell
- Type </TD> to complete the cell
- Repeat the last three steps for each cell that you want displayed in this row
- Type </TR> to complete the row
- Repeat the procedure from the <TR> tag for each row in the table
- On completion of the table type </TABLE>
Example of text laid out in a tabular format, notice that each item in the first cell of each row has been emboldened
The text displayed in a tabular layout on the page
Add a Border to a Table
By adding a border you can define the contents of each cell and separate the table from the rest of the text on the page.
To add a border to a table
- Position the insertion point inside the TABLE tag
- Type BORDER=x, where x is the thickness of the border in pixels (the default thickness is 2 pixels)
Example of the BORDER attribute within the TABLE tag
Resulting border applied to the table
Note: To remove a border, use BORDER=0
Continued...
