Tables are incredibly useful tools and an essential element in web design. Tables allow you to layout text, images, and other web page elements in ways that you want. Using table, however, can be quite complex.
== Inserting a Table ==
The table toolbar is located at the bottom of the text editing toolbar.
To create a table, first click on the “Insert new table” button on the left hand side of the table editing toolbar.
You will then see the “Insert/ Modify table” dialog. After you create your table you can bring this dialog up any time by placing your cursor in the table and clicking on the “Insert new table” button.
In the insert new table dialog you can set the number of rows and columns. Like in an Excel spreadsheet rows refer to vertical and columns refer to horizontal sections. Cellpadding and cellspacing refer to the buffers between cells. Cellpadding is within the cell boundaries while cellspacing is between the cells (see here for more information). If you set the border line to a number greater than 0 the browser will draw lines between cells. The bigger the number the thicker the border.
== Example 1: Aligning Text ==
One of the really useful things about tables is that they are good for aligning text. Take for example the following:
| Country: United States County: Queens Founded: 1645 Town: 1683 – 1898 Named for: Flushing, Netherlands (Vlissingen) |
This looks OK, but it would look much better if all of the labels and text were aligned. To do this we can create a table with 5 rows and 2 columns.
| Country | United States |
| County | Queens |
| Founded | 1645 |
| Town | 1683 – 1898 |
| Named For | Flushing, Netherlands (Vlissingen) |
Next, we can move the text in the second column closer to the text in the first column by changing the first column’s border width. To do this move the cursor into one of the cells in that column whose width you want to change and click on the “Table Cell Properties” button.
Next change the width to make the column more or less wide. For narrow columns start width a number between 10 and 15 and then increase or decrease until its right. For wider columns start with a number between 20 and 25.
== Example 2: Putting text and pictures side-by-side ==
Another useful thing tables can do is to help control text wrapping around pictures. Take for example you have this picture:
and you want the following text to appear on the right hand side:
“On December 19, Jackson returned a punt 65 yards for a touchdown to lead the Eagles to a win against the New York Giants in the final 14 seconds of the game. The Eagles had trailed 31-10 with under 8 minutes to play but had come back with three unanswered touchdowns. With 14 seconds left, the game was tied at 31-31 and Jackson received the punt. He fumbled at first, but then picked it up and ran 65 yards for the score, running across the goal line when he reached it in order to wind out the time.[22] This punt return is the first and only game-winning punt return on the final play from scrimmage in the history of the NFL”
You can create a table with 1 row and 2 columns, put the picture in the lefthand column and the text on the right:
|
“On December 19, Jackson returned a punt 65 yards for a touchdown to lead the Eagles to a win against the New York Giants in the final 14 seconds of the game. The Eagles had trailed 31-10 with under 8 minutes to play but had come back with three unanswered touchdowns. With 14 seconds left, the game was tied at 31-31 and Jackson received the punt. He fumbled at first, but then picked it up and ran 65 yards for the score, running across the goal line when he reached it in order to wind out the time.[22] This punt return is the first and only game-winning punt return on the final play from scrimmage in the history of the NFL.” |
