Working with Tables in TennisConnect

Tables are useful for arranging the layout of text and images on your web site.

You can easily manipulate existing tables and can insert content areas using the Pick & Click Editor, however if you are not familiar with Tables (rows, columns and cells) to begin with, you should consider getting some help from an Authorized Service Provider.

Create a Table
Using the TennisConnect Editor position your cursor where you want to insert a table and click Insert Table:

Make sure your pop-up blocker allows pop-ups from TennisConnect.

Choose the number of rows and columns (you can insert more later) and the table width:

Border size: Enter 0 if you do not want any borders (cell block borders like in an excel spreadsheet), enter another value (higher numbers are thicker)

Width: Our web pages are 770 pixels wide by default, so I am going to specify 770 pixels for a properly sized page.

Height: Usually left blank, as rows can "auto expand". You might use height once you start nesting tables (put a table inside a cell of "parent" table).

Cell Spacing: The number of pixels in between each cell. Usually 1-3.

Cell Padding: The number of pixels to pad inside a cell. Usually 3-5. Padding is what indents your content so that it is not completely "flush left" (ever notice a web page where the characters are right up against the page border? It can be hard to see or read letters with left vertical line: like B, D, E, F, H, K, L etc. Using cell padding corrects this problem.

Caption and Summary are rarely use in TennisConnect.

Click OK to insert this table: Now you have a three row, two column table:

Set Column Width
You should set the width of your top cells. This will fix the width of the entire column (unless you later merge cells). NOTE: your table could still get stretched if you place a large or horizontally landscaped image (or paste something with Microsoft Office formatting).

To set the width of a cell, click inside the cell (so your cursor is at the insertion point).

In this case choose Cell | Cell Properties and set the width to 50%:

Width can be in % or a fixed number of pixels

Height is rarely used but you can force a cell height (note, doing so will stretch the height of the entire row to the height of the tallest cell. That is OK, as you can split the remaining cells).

Word Wrap causes the text top wrap down as you type to thwe end of the cell

Horizontal Alignment can be left, middle, or right (left is the default)

Vertical Alignment should be top or middle in most cases.

Row Span and Column Span allow you to "stretch" just this cell across X number of columns or rows. Example:

Change Cell Background Color
Let's say you want a "column header" shaded differently to give your layout a bit of relief.
Right Mouse Click in the table cell, choose Cell | Cell Properties | Background Color (Select) If you know your RGB code you may enter it, or pick it off the color palette:

Result: (We added the header text and changed the text color using the TCOEditor tool bar - just like in Word)

Merge Cells
In addition to merging cells via the Row Span and Column Span, you can highlight cells in a row (left click, hold the mouse down, drag over the desired merge cells so the cells are "selected":

Then right mouse-click and choose Merge Cells:

Then see the result:

More....
Please explore the additional functions of the TennisConnect Editor and working with tables by "right mouse-clicking" inside a table cell:

Cell Functions