Tables are a way of displaying data in rows and columns, much like a spreadsheet. You can make tables in Composer almost as easily as you can make them in your word processor. If you already have the data in a spreadsheet or a database, you may want to look and see if your application supports saving as an HTML table.
A table is a paragraph-level format: they go on their own line. Place the cursor where you want your table to be, pull down the “Table” menu, and choose “Insert Table...”.
You can make your table be a percentage of the window’s width: if the viewer resizes their window, the table will also resize itself. Or you can make it a specific number of pixels wide. Or, you can have it automatically resize to fit its data. Use the pull-down menu to change between a percentage width and a pixel width, or simply erase the width number to make the table resize itself automatically to its data.
Once you insert a table, you can change your mind about it by clicking inside it and choosing “Table Properties” from the “Table” menu. You can change the border size, the space between and within cells, and more cell-related information we’ll get to later.
Larger pixel sizes usually result in a sort of beveled look to the edges of the table.
Like other formatting tabs, table tags can have meaning. There are two basic kinds of table cells: normal cells and column or row headings. If we insert a row above the top row in the above table, we can place some column headings in our table. Place the cursor in the top row of your table, and then choose “Row Above” from the “Insert” submenu of the “Table” menu. This inserts a blank row above our top row. Type some column headings, such as “Year” and “Important Events”.
While the cursor is still flashing in the top row, choose “Row” from the “Select” submenu of the “Table” menu. The entire row should then be selected.
Go to the “Table” menu again and choose “Table Properties”. Click on the “Cells” tab and change “Cell Style” to “Header”.
Your column headers should now be bold. You can change the styling if you wish, but by making them headers, web browsers know where the headers of your table are. Headers can be anywhere in your table, but usually you’ll want them in the first row or in the first column.
Tables can themselves contain tables. As in your word processor, table cells can be joined to make a cell that is wider than one column or taller than one row. Table cells also can resize themselves both vertically and horizontally to fit what they contain, whether it’s an image or a paragraph. Because of this, tables have become very useful for page layout as well as for displaying tabular data. Tables also have problems when used for page layout instead of data display: they cannot be easily redisplayed in different display formats, and they often hide the meaning and order of displayed content.
This page was created with two tables. The first table is two columns wide, with the main story in the left column and the title in a double-size single column that joins the two columns. Inside the right column, below the photo, is another table, this one also with two columns.
This is the same page in HTML Tag view so that you can see the borders of the table (which we set to zero in Table Settings) and the yellow tag boxes at the beginning of each table, cell, headline, and paragraph.
If you want to know how we did the horizontal bars and the small-cap headlines, keep reading to the section on styles.