In normal word processing documents, tables are generally only used to show data in rows and columns. In HTML, they serve a much larger purpose, primarily for arranging information on the page accurately. Many pages on the web use tables to create a list of links to other parts of the site down one side, a title across the top and the main body text in the middle.


Table 1
Cell (0,0)Cell (0,1)Cell (0,2)Cell (0,3)
Cell (1,0)Cell (1,1)Cell (1,2)Cell (1,3)
Cell (2,0)Cell (2,1)Cell (2,2)Cell (2,3)
Cell (3,0)Cell (3,1)Cell (3,2)Cell (3,3)


Description
This is an example of one of the most simple kinds of table. The borders are all visible and each cell contains only a small amount of text.

How To Make It
First, open the Table Wizard using the Insert | Table menu item. This wizard includes a preview of what the table should look like, although browsers interpretation of tables can change widely. The first change we need to make to this basic table is to type in all the text. Simply click on the cell you want to enter text into and start typing. You can use the tab key to move between cells. After entering the text, we want to change the background colour. Click on the down arrow next to the button displaying a paint pot tipping over, and select the silver colour. The colour of the preview should then change. We want all the cells to be the default size, and we don't want to change the width of the border between cells, so we have finished creating the table. Click on the Insert Table button to create the table.


Other PagesTable 2
Link 1
Link 2
Link 3
(these links won't work, they are here only to demonstrate how this column could be used.
Description
This table will automatically stretch when you resize the browser window as the dimensions of the table are set as percentages of the browser window. The border width is set to 0 so it appears that the page contains two columns.

How To Make It
Open the wizard as in the previous example. We only want two rows and columns, so remove two of each using the 3rd and 4th toolbar buttons. We then want to set the border between the cells to 0. Click on the 5th button, and set the value of the box which then appears to 0. The border in the preview should dissapear. Resize the cells using the lines between the grey cells at the edge of the preview to make the second row and second column much bigger than the first, so that the table covers the entire space available. To make sure that the table will stretch to cover all the available area in the browser, tick the Use Percentages of Window option. Enter the text into the cells and click on the Insert Table button.