1.      A table is an object that can hold text and other objects, including other tables. Its defining feature is that it contains rows and columns.

A.     The main area of the home page consists of a table with two columns and one row. The columns are the main text area and the “Upcoming Events” area that contains ads for the next tournament or two.

B.     In HTML every table has at least three elements, each of which is associated with a tag.

1)      The <TABLE> tag is used to define the basic characteristics of the table: its width, whether it has borders, how many columns it contains, and so on.

2)      The <TR> tag is used to mark the beginning of a new row.

3)      Every cell in the table has a <TD> tag.

C.     Several other tags are possible, and each of the main tags can be modified in many ways.

D.     Cascading style sheets (css) can be used to set many of the attributes of table. Since the css is not available through the programs in the admin section of www.NEBridge.com, it is sometimes difficult to achieve the desired effect.

E.      This document will explain two of the ways of creating tables: copying an existing table and using the Table button.

 

2.      Warning: Be careful about experimenting with tables.

A.     Always save your work before you try anything new.

B.     Some features do not work at all. Never use right-click and then select Cell Properties. Doing so will cause the program to get hung up.

 

3.      Using the Table button to create a table from scratch:

A.     Determine all of the following as well as you can.

1)      Where the table should appear on the page.

2)      The number of rows and columns.

3)      The width of the column in pixels or percentages.

4)      Whether you want borders, and if so, what kind.

5)      Any other requirements such as background colors and images.

B.     Position the cursor and then click on the Tables button. The following window will appear.

C.     Define the table on the above window.

1)      Key in the number of rows and columns.

2)      The width can be expressed in either pixels or percent. The default is pixels. 

3)      You can specify whether you have any rows or columns that you wish to treat as “headers.”

4)      Warning: You can set the Border size to 0, but that will not eliminate the border. Eliminating the border requires use of the Source button.

5)      The Caption and Summary fields are extraneous.

6)      Do not be too concerned about mistakes. You can easily change most of the settings as needed retroactively.

7)      Click on OK when you are finished.

D.     An empty table will be inserted in the work area. Fill in the cells with text as well as you can. You may discover some mistakes in this process.

E.      In the above table, I neglected to leave room for the printed bulletin and the webmaster's notes. The formatting is also awful, but that can be fixed later.

1)      To add a line for the two missing items, I positioned the cursor in one of the cells in the last row. Then I right-clicked and selected “Row” and then “Insert Row After.”

2)      I then keyed in the text for the cells that were added.

F.      Now it is time to fix the appearance of the first cell, which holds the title of the event.

1)      Click on the Source button. Detailed instructions for use of the Source feature can be found here. This document will include only a few tricks.

2)      The source probably looks a little daunting; if you are not ready to deal with the HTML, then you should skip to the step that describes copying another table. We need to search for the first cell using the browser’s search facility (Ctrl F). We can look for “Ocean” or “<td”. I made the following changes:

a)      To the <td> tag that immediately preceded “Ocean …” I added a “colspan” parameter to indicate that this cell was eight columns wide.

b)      I then added style elements to denote the background color, the alignment of the text, and the height.

c)      I removed the seven empty cells on the first line. This was the result:

3)      I can then select the text in the title and use the Bold button, the Font and Size pull-down menus, and the Color buttons to make it look like the “Granite State Getaway.”

4)      Now the colspan trick can be used on the three cells on the second line, as well as both of the text cells on the last line.

5)      Almost there. I used the Bold button on the titles of two of the rows. I then used the Center button on all of the other cells. The above is the final result. 

 

4.      Copying an existing table:

A.     This method is much easier, but it has limitations. Duplicate an existing table that is similar to what you want.

1)    Add a blank line where you want the new table.

2)    Position the cursor below the existing table. 

3)    Use Shift and the up arrow to copy from the line below the existing table to the first line of the table. 

B.     Position the cursor where you want the new table and use Ctrl V to put a duplicate copy of the table in your work area.

C.     This table is similar to the one created in the above step. It has the same number of rows and columns, and the contents are nearly identical. The title line is, of course, different. Change the text to be what you need.

D.    The table's border did not get copied. Put the cursor anywhere on the table and right click. Select "Table Properties." In the Table Properties window enter 1 in the Border Size field. 

E.     Remove all of the links using the Unlink button. You can save a little time by unlinking a row at a time. Here is the finished product.

F.      The table looks like this on the website:

F.      Notice that the font that is actually displayed is different from the font that was displayed in the text editor. .