ZyWeb: Quick Guides

How to insert tables (advanced users only)

Tables can be used to display information in a way that ensures less cluttering of your web page as well as making your data and information user friendly to read and understand.

Building tables requires a basic knowledge of how HTML works; if you do not know how to add HTML to a ZyWeb page then please read our "How to insert raw HTML into ZyWeb" quick guide first, which can be found in the menu to the left.

The basic HTML tags of tables can be found below:

**HTML Table Tags**
Starting Tag	Ending Tag	Tag Description
<TABLE BORDER="0">	</TABLE>	Containers for borderless table.
<TABLE BORDER="2">	</TABLE>	Tag pair for table with borders (set the value equal to the size of the border effect you want).
<TR>	</TR>	Establishes a row within a table.
<TD>	</TD>	Defines a cell within a Row.
<CAPTION>	</CAPTION>	Places a title at the top of the table.

The above table has been constructed as follows:
The title, "HTML Table Tags" is a part of the table, as is everything else contained within the <TABLE> and </TABLE> tags. Each row is constructed with a set of <TR> and </TR> tags and within these the content of each cell is included between the <TD> and </TD> pair. Only text has been used in the table shown above, although graphics can be inserted into the <TD> cells as well. The <CAPTION> and </CAPTION> centers a top title.

Normal tags, such as <BR>, <P>, or the <B> and </B> pair may be used within the individual cells. Each table cell may be looked upon as its own mini HTML document opening up many areas for creative expression.
Tables are written into an HTML object that you insert into your web page. It's best to create a test file on your computer first to make sure that the table is correct before adding it to your web page.

The code below is used to create this example table:

<table border=2>
  <tr>
    <td>first table cell</td>
    <td>second table cell</td>
  </tr>
  <tr>
    <td>first table cell, row 2</td>
    <td>second table cell, row 2</td>
  </tr>
</table>

first table cell	second table cell
first table cell, row 2	second table cell, row 2

Adding a photo or graphic
If you wish to add a photo or graphic to a table, then upload and publish the image in question, and then copy the exact URL of your photo (for example http://www.zyworld.com/username/blah.gif) and put it in between the <TD> and </TD> tags, as one of your pieces of table content, insert the HTML tag <IMG SRC="URL"> - where 'URL' is the absolute address. If it is in your Filestore, don't forget to publish it first!

Changing the width and height of cells
Although the width and height of cells and table are automatically assigned upon placing the text in, you can change these as you see fit, and it is a fairly easy procedure to change them. When you insert a <td>, <tr> or <table> code, add either width="#" and/or height="#" - for example, if you want to expand the table size, the code would be something similar to <table border="0" height="200" width="200"> - please note that you can add the text in either pixels or percentages - just add a percent symbol to the end of the number if you want to determine the size in percent. Percent is deemed as the size of the working area (ie of the visitors display if this is the first table or of the size of the cell that this table is placed in if you are creating 'nested tables'.

Changing the background colour
You can also change the Background Color of invidual cells, rows and even the entire table too - when using a <td>, <tr> or <table> command, simply add the code bgcolor="color" to the tag - for example, <td bgcolor="YELLOW"> - you can specify a standard color name or you can specify the RGB values in Hex using #FFDD56 for example.

Nesting tables inside a table
It is also possible to 'nest' tables inside other tables. Simply insert the code for a new table inside a single cell. In this way you can further enhance the design of your table.

Tables require a certain amount of practice to get right; it's advisable that you experiment with this basic table to understand all the various commands and concepts you can use.