Tables <TABLE>

When creating HTML documents, tables are particularly useful for defining the layout of a page. Tables make it easier to arrange text and images in columns. HTML code allows Embedded tables, that is, placing a table inside another table.

When you insert a table, AceHTML displays a window so that you can enter the table parameters. On the other hand, if you prefer to enter the HTML code directly in the edit window, then you can use the Quick table command.

  1. Position your cursor at the desired place in the table.

  2. In the Tables, frames and lists tab, click on the icon Insert a table. You can use the shortcut SHIFT+ALT+T (Refer to Shortcuts list).

  3. In the Insert a table window, indicate the number of columns and rows for the table in the appropriate boxes.

  4. Press on the OK button. The Table window is displayed.

  5. In the Preview window at the bottom of the screen, place the pointer before the code &nbsp; and enter manually the contents for each cell in the table.

  6. Press on the OK button.

To quickly change the size of cells in a table:

  1. Once the Table window is displayed, place the cursor on the line separating two cells or columns.
    The cursor changes to crosshairs pointing horizontally or vertically, depending where you placed the cursor.

  2. Keep the left mouse button pressed and drag the crosshair in the desired direction (left, right, top or bottom).

To modify a table in the table window:

To insert HTML tags in the table:

  1. When the Table window is displayed, place the cursor at the desired location in the table.

  2. Click on the right mouse button to open the context menu.

  3. Click on the Tags option.

  4. Choose the tag you want to use from the list.

The following are optional options found in the <TABLE> command:

Width

You can adjust the width of the table by changing the Width. This value can be entered as a percentage or in pixels. To enter it as a percentage, check the box for "%". If this box is not checked, the value will be in pixels. By default the table is adjusted to 100% the size of the display. This option adds the attribute WIDTH to the TABLE tag: <table width="50%">à</table>

Height

You can adjust the width of the table by changing the Height. This value can be entered as a percentage or in pixels. To enter it as a percentage, check the box for "%". If this box is not checked, the value will be in pixels. By default the table is adjusted to 100% the size of the display. This option adds the attribute HEIGHT to the TABLE tag: <table height="50%">à</table>

Border

You can add a border to the table by indicating its width in the Border box. This value is expressed in pixels and the default value is 0. The higher the number, the thicker the border. This option adds the attribute BORDER to the TABLE tag: <table border="2">à</table>

Space in cells

You can adjust the space between cells and the border of a table by specifying a measurement in the Space in cells box. This value is expressed in pixels and the default value is 0. The higher the number, the larger the space between the contents in the cell and the border width. This option adds the attribute CELLPADDING to the TABLE tag: <table border="2" cellpadding="10">à</table>

Space between cells

You can adjust the space between cells in a table by specifying a measurement in the Space between cells box. This value is expressed in pixels and the default value is 0. The higher the number, the more space in between the cells and the larger the border (if there is one).

This option adds the attribute CELLSPACING to the TABLE tag: <table cellspacing="10">à</table>

Background

You can add a background color to the table. Click on the Color button and select a color. This option adds the attribute BGCOLOR to the TABLE tag: <table border="0" bgcolor="#0000ff">

Horizontal Alignment

you can select the alignment of the table which is left by default, and center or place it to the right of your Web page. This option adds the attribute ALIGN to the TABLE tag: <table align="right">à</table>