Probably, one of the most difficult things for the beginner to learn in HTML is how to organize and arrange elements of a web page in tables. Creatext's Insert Table feature makes creating tables a snap!
|
The Insert Table Dialog Box makes creating tables easy.
Following the screen shot of the Insert Table Dialog Box and the list below, we will create a table, step-by-step and show how easy it is to create tables in Creatext.
Ready? Have your Creatext application open and duplicate the steps shown below and you will create a table.
|
The table below explains the numbered features shown in the Insert Table Dialog Box. We will explain each one as we go through the process of creating a table. ( You may print out both the Table Insert Dialog Box, above and the table below, for future reference, if you'd like. )
|
1
|
Columns
|
Enter Number of Columns
|
11
|
Colspan
|
Enter Number of Columns Cell Should Fill
|
|
2
|
Rows
|
Enter Number of Rows
|
12
|
Rowspan
|
Enter Number of Rows Cell Should Fill
|
|
3
|
Border
|
Enter Border Size or "0"
|
13
|
Width
|
Enter Width for Selected Cell
|
|
4
|
Width
|
Enter Width of Table
|
14
|
Height
|
Enter Height for Selected Cell
|
|
5
|
Height
|
Enter Height of Table
|
15
|
Color
|
Enter Color for Selected Cell
|
|
6
|
Color
|
Enter Background Color for Table
|
16
|
Non-Breaking Space
|
Select for Current Cell
|
|
7
|
Cellspacing
|
Enter Spacing for Cells
|
17
|
Set
|
Click to Set Parameters of Table
|
|
8
|
Cellpadding
|
Enter Padding for cells
|
18
|
Cell Set
|
Click to Set Parameters of Selected Cells
|
|
9
|
Chooser
|
Brings up Color Chooser
|
19
|
Comments
|
Select if You Want to Add Comments
|
|
10
|
Preview
|
Preview of Table Cols & Rows
|
20
|
Insert
|
Click to Insert Tablet into HTML Document
|
At the start of this tutorial, I said it's a good idea to draw out a plan for your web pages. That's especially true when making tables, at least until you get used to how they work. Here's a small, rough sketch for a table. It's fairly simple, so let's work on it right now.
We'll make a table with 3 Columns and 6 Rows. Go to the Insert Menu and select, Table. With the table dialog box open, ( For the sake of space, only the top part of the table editor is shown here. ) enter the number 3 in the Columns Field. This will show as 3 columns in the preview window.
|
|
|
Then, enter 6 in the Rows Field. Each time you enter a number in the Columns and Rows Fields, you will see the table layout in the preview window.
|
|
|
Now, we want a Heading for our table, so let's click in the space that is Column 1 and Row 1. ( Shown here in blue. ) The heading will span the top 3 Columns, so we need to type a numeral 3 in the Colspan ( Column Span ) Field.
|
|
|
With Column 1 and Row 1 selected, ( Number 1 ) we've typed a 3 in the Colspan Field ( Number 2 ) and then we click Set. ( Number 3 )
And, there's the Heading we need for the table, and it spans 3 columns.
|
|
|
Next, enter the numeral 10 in the Cellpadding Field, as shown, below. When making a table, there are several choices in how and where to add color. The entire table background can be a color, or cells can be colored individually. To color the heading of this table, click in the top row to select it. ( shown here in light blue. ) Then, click the Chooser Button, in the lower right corner. That will bring up the Color Chooser and the color red is selected for the header of the table. Once the color is selected, click on Set for row to make the background color for top row red.
|
|
|
To add colors to other cells, or rows, click in the cell to make it active. Then click on the Chooser Button to bring up the Color Chooser. Select the color you want and click Insert. Remember, you can color one cell, a row, a column, or the whole table background.
If your table, or any column or row, needs to be a certain size, enter the size for Width and Height in the appropriate fields. Tables stretch or shrink to fit their content. If you enter a size that's too small for the content of the table, the browser will display the table in the smallest size possible.
|
|
Below is how the table appears in Creatext. The red type shows "Comments" the Columns and Rows. The Table Data for each cell is placed between the <TD> and </TD> tags.
|
|
SOFTBALL SCHEDULE
|
|
Mon. Night
|
Wed. Night
|
Fri. Night
|
|
Smallville
|
Baxley
|
Oxford
|
|
Home Game
|
At Baxley
|
At Oxford
|
|
Game Time:
|
Game Time:
|
Game Time:
|
|
7:30 pm
|
8:00 pm
|
7:30 pm
|
|
Here's the finished table. As you can see, adding colors, centering the type within the cells, and with cellpadding, the table is properly spaced and easy to read. Below, is a list of specifications for this table:
|
- Border for table is 1 <TABLE border="1">
- Cellpadding is 10 <cellPadding="10">
- All type is centered in cells - <CENTER></CENTER>
- Row 1 spans 3 columns <TD colspan="3" rowspan="1">
- Row 1 background color red <bgcolor="#FF0000">
- Row 1 type colored white <font color="#FFFFFF">
- Row 2 background color pale yellow <bgcolor="#FFFFBB">
- Row 2 type colored black <font color="#000000">
- Row 3 background royal blue <bgcolor="#4169E1">
- Row 3 type colored white <font color="#FFFFFF">
- Row 4 background white <bgcolor="#FFFFFF">
- Row 4 type colored black <font color="#000000">
- Row 5 background royal blue <bgcolor="#4169E1">
- Row 5 type colored white <font color="#FFFFFF">
- Row 6 background white <bgcolor="#FFFFFF">
- Row 6 type colored black <font color="#000000">
|
|
Here's another table created in Creatext. With graphics, textures, colored cells, colored type and different column spans, you can make some very nice tables.
|
|
|
|
