Working with Tables

Tables are used for organizing data in rows and columns to get a better overview of the information. When you insert a table, you select the number of rows and columns for the table. You can also define the appearance of the table, either by setting the properties manually or by using predefined CSS classes.

Creating a Table

Create a table as follows:

1. Place the cursor in the Editor where you want to insert your table.
2. Click the Inserts a new table toolbar button to open the Insert/Modify table dialog box. Under the General tab you can work with general settings for the table.
   
3. In Cols and Rows, set the number of columns and rows.
4. In Cell padding, you can define the space in pixels between the text in the cell and the cell borders. This is only necessary if you do not use a CSS class for table formatting.
5. In Cell spacing, you can define the space in pixels between the cells in the table. This is only necessary if you do not use a CSS class for table formatting.
6. In Alignment, you can define the position of the table, in case the table width does not take up the entire available space.
7. In Border , you can set the weight of the table border in pixels. Use this option if you want a table border and are not using CSS classes to format your table. Default value is zero.
8. In Width , you can set a fixed width for the table in pixels. If you do not specify a value here, the width of the table will adapt to the content using the full available space.
9. In Height, you can set a fixed height for the table in pixels. Most often the height of the table is controlled by the content, allowing the table to expand downwards.
10. In Class, you can specify a preset formatting to use for the table. Choose an appropriate CSS class from the drop-down list.
11. In Table caption, select to insert a table caption space for the table. The table caption allows you to enter a table heading above the table.
12. Click Insert to insert the table into the page. Continue by entering the table data into the table cells. You can move between the table cells using the arrow keys or the tab key.
13. When you are done, save the page.

Formatting the Table Header

To format the table correctly, you need to define the header of the table. This is important from an accessibility point of view to separate header cells from data cells when the table data is interpreted. You could format the header row manually by applying for instance bold formatting to the header row text, but this will result in an incorrect formatting of the table.

1. Open the table for editing and place the cursor in the first header row.
2. Select Table cell properties in the Toolbar.
   
3. In Cell type, select Header from the list. This will result in a <th> HTML tag for the header cell.
4. In Scope , select Column from the list to set the header for the entire column.
5. Select Update all cells in a row in the drop-down list to apply the same properties to all table cells in the header row.
6. Click Update to update the information for the table.
7. Save your changes. If you use CSS classes for formatting tables, you may see that table header is now updated with a specific header formatting.

Deleting a Table

To delete a table, place the cursor in a table cell and select the Delete table toolbar button.

Last updated: 2011-03-25 | Copyright © EPiServer AB