Lesson 5-2
Creating Tables
Using the Insert Tool
The following instructions are what I have found to be the simplest way
of creating and setting the properties for a table. Click on Table in the
Menu Bar and choose Insert, then choose Table... this will open a new
window as shown in the screenshot below.
Size
Next you will need to choose how many rows and columns you will need in
your table.
Layout
Alignment - you can align your table to the left, right or center.
Border size - choose the size border you would like around your table,
set to 0 for no border.
Cell padding - set the amount of space between the border and the
contents within a cell
Cell spacing - set the amount of space between the cells in a table
Specify width - you can turn this option off by unchecking the box. You
can also specify the width of the table in pixels or in percent. I usually
choose percent because that will alter the size of the table according to
the visitors screen resolution.
Set
If you do a lot of tables and you have a preferred size and layout,
checking the Set as default for new tables could save you some time in
preparing your table.
As stated in a previous lesson the Style is used for Cascading Style
Sheets.
Once you have set your preferences for your table click OK. You will
now see your new table on the page. If your table has a border, you will
see a solid line around the border and cells, if you chose no border you
will have a dotted line around your table and cells. The dotted lines will
not show when your page is displayed in the browser.
Editing the Table Properties
Right click somewhere inside your new table and choose Table
Properties. This will open a new window as shown below. Now you can design
your table even further.
Some
of these items you have already set when you created the table, you can
just ignore them or this gives you the ability to adjust them to your
preferences if you are not happy with how you initially created the table.
The additional settings are:
Layout
Float - use this to set how text is displayed around the table. This is
useful if your table is not the full width of you page and you want text
to be displayed to the right or left of the table
Specify height - you can choose to specify the height of your table in
pixels or in percent, or uncheck the option to turn it off
Borders
Color - Set the color of your border, see
this page to read about the color charts. This option is not needed if
you are going to set a Light border and Dark border.
Light border and Dark border - See
this
page to read about the color charts. The Light border and Dark border
gives the border a 3D look.
Show both cells and table borders - check this option if you also want
borders around your cells.
Background
Check this page to read about the
color charts. You can choose to display a color for the background of your
table, choose no background at all, or you can place a picture in your
table for a background. To add a picture to the background of your table
check off Use background picture then either place the url for the picture
or click on Browse. Browse will open a new window as shown below.
Horizontal alignment - specifies the horizontal alignment of the
contents of the cell, the choices are left, right, center and justify.
Vertical alignment - specifies the vertical alignment of the cell, the
choices are Top, middle, baseline and bottom.
Rows spanned - specifies how many rows the cell will use.
Columns spanned - specifies how many columns the cell will use.
Header cell - add column headings to your table
No wrap - by checking this your text will not wrap, in other words you
will have to enter carriage returns for the contents of the cell to go to
the next line.
Caption
To insert a title for your table, click on Table on the Menu Bar and
choose Insert then Caption. You can only enter one caption to your table.
Below is a table I created while writing this lesson to show how a
table can be formatted with different options. The coding for the table is
below the table itself. I started out with a plain table with 4 rows and 3
columns. I used the merge cells to create the spanned rows and columns.
Insert Caption to add a title to your table
| |
|
| |
|
| |
|
| |
| |
<table border="10" cellpadding="10" cellspacing="10" width="90%"
id="AutoNumber3" bordercolorlight="#0000FF" bordercolordark="#000080"
background="images/backgrnd.jpg">
<caption>Insert Caption to add a title to your table</caption>
<tr>
<td width="33%" bordercolorlight="#0000FF" bordercolordark="#000080"
bgcolor="#CCCCFF" bordercolor="#CEE7FF" nowrap rowspan="2"> </td>
<td width="67%" bordercolorlight="#0000FF" bordercolordark="#000080"
bgcolor="#CCCCFF" bordercolor="#CEE7FF" colspan="2"> </td>
</tr>
<tr>
<td width="33%" bordercolor="#CEE7FF" bgcolor="#CCCCFF" bordercolorlight="#0000FF"
bordercolordark="#000080" rowspan="3"> </td>
<td width="34%" bordercolor="#CEE7FF" bgcolor="#CCCCFF" bordercolorlight="#0000FF"
bordercolordark="#000080"> </td>
</tr>
<tr>
<td width="33%" bordercolor="#CEE7FF" bgcolor="#CCCCFF" bordercolorlight="#0000FF"
bordercolordark="#000080"> </td>
<td width="34%" bordercolor="#CEE7FF" bgcolor="#CCCCFF" bordercolorlight="#0000FF"
bordercolordark="#000080" rowspan="3"> </td>
</tr>
<tr>
<td width="33%" bordercolor="#CEE7FF" bgcolor="#CCCCFF" bordercolorlight="#0000FF"
bordercolordark="#000080"> </td>
</tr>
<tr>
<td width="66%" bordercolor="#CEE7FF" bgcolor="#CCCCFF" bordercolorlight="#0000FF"
bordercolordark="#000080" colspan="2"> </td>
</tr>
</table>
Using the Draw Table Tool
If you do not have the table toolbar pinned open then click on
Table in the Menu Bar and choose draw table. This will open the toolbar
into a floating position. The animation below will show how to draw a
table. Once your table is drawn you can use the Table Properties and Cell
properties as instructed above.
and choose Preview to find the picture you want. Once you have found the
picture click on it and then click on open and it will be inserted into
the background of your table.
A
window as shown in the screenshot on the left will appear. Most of the
options in this window we have gone over already with the Tables
Properties and the Insert Table, they work the same as the other two
windows except that they are specific to cells themselves not the entire
table. The options that have not been discussed are: