Getting Boxed In, Part 1:
Using Tables for Tabular Content
What You’ll Learn in This Hour:
. How to create a table from scratch . How to change the appearance of a table
. How to use the Tables toolbar to work with tables
. How to use table and cell properties to change the appearance of tables . How to use AutoFormat to quickly change the appearance of your tables
So far, you have learned about simple text elements, such as the headings, para- graphs, blockquotes, lists, and links. But these let you display your content in only a linear manner. What do you do if you want to introduce more structured content into your web page or control the position or relation between certain content? In many cases, the answer is tables. Just like in a word-processing application, Hyper- text Markup Language (HTML) tables can display content in a well-organized and structured way. And they work in much the same way as the other text elements, too.
Tables are composed of cells organized in rows (horizontal lines) and columns (verti- cal lines) just like a spreadsheet. You can style each element inside the table to achieve the desired look and feel. You can control the color, size, and appearance of the borders, cells, rows, and columns. Thus, when used correctly, tables can greatly enhance the experience for the visitor by making your content more visually appeal- ing and meaningful.
ptg7913109
One-Minute History of Tables in Web Pages
When HTML originated in the 1980s, it was as a simple standardized markup lan- guage for use by physicists to share research data and results on the Web in an easy and manageable way. Much of the data was contained in tables, so tables became an important addition to HTML. However, as designers, developers, and the public started to see the potential in HTML and the World Wide Web, the content made available quickly moved beyond simple text documents with a few images and some tables to more advanced designs with background graphics, menus, and advanced interactivity. As the demands of the new users expanded, so did the capabilities of the markup language. As a result, what began as a simple way to communicate text content grew into a hugely complicated code set with heavy focus on the visual aspects of presentation rather than on the content.
One of the big elements of this development was the use of tables as a layout tool. If you have ever tried to make content look nice in a word-processing application, you know you can use tables to make backgrounds, separate text, and insert other eye candy. This quickly became the standard for web design at the cost of legibility:
Nonessential information, such as layout and design code, cluttered the simple HTML markup.
To solve this problem, a new language, called Cascading Style Sheets (CSS), devel- oped. The idea behind CSS was to separate the HTML code from all the styling and layout code and return it to its intended use as a markup language. As CSS became more prevalent, the standard-setting body of the Internet weeded out or deprecated the styling elements that had made their way into HTML.
The idea behind standards-based code, which is what you make by using Expression Web 4, is to return HTML to its intended use as a markup language and separate it from the styling. In other words, tables are to display tabular data and nothing else.
For example, rather than making a menu consisting of a series of table cells with graphic buttons inside, you make a menu using an unordered list styled using CSS.
(You learn how to make such a menu in Hour 17, “Building a Functional Menu.”) There is an ongoing battle within the design and development community over the use of tables as design elements. I stand firmly on the side of standards-based code and CSS, and only briefly touch on how to use tables as a layout tool. That’s not to say doing so is wrong—you are free to design using tables if you choose. However, you will not learn how to do so here. With that said, it’s time to make tables!
ptg7913109
Creating a Table from Scratch
The most common use of tables is to display some form of statistical data in which each item has several variables. Good examples of tables are address lists with name, address, phone number, and email address as variables; archives of your books, music, or movies; or purely statistical data, such as temperature variances and financial data.
In truth, a table can display any type of information that needs some form of structure.
In this lesson, you create a table based on the photo of all the cameras. In that table, you list their variables. The following steps show you how to create a table in Design view:
1. Open the myCameras.html file in Design view. Scroll to the bottom and make a new h2subheading with the text Camera Inventory.
2. Make a new paragraph under the heading and click the Insert Table button on the Common toolbar. This opens a drop-down panel consisting of empty boxes (see Figure 9.1). By sliding your mouse over the boxes, you can highlight the number of rows and columns you want. In this example, you want 12 rows and 5 columns. Because the drop-down panel allows only for tables up to 6 rows and 7 columns, you need to click the More Options button to open the Insert Table dialog and set the rows and columns manually. We cover this dialog in more detail later. For now, just set Rows to 12 and Columns to 5, and click OK.
FIGURE 9.1 Use the Insert Table button on the Common toolbar to easily create tables with different row and column configurations.
You now have a 12-by-5 table in your page. By default, HTML tables are invisible, meaning they have no color and no borders. They simply separate the content within them, as indicated by the dotted lines.
You can control how tables appear in your page by using the functions found under Table on the menu bar or by right-clicking the table and accessing the options from there. However, the easiest way to edit your tables is by using the Tables toolbar found under View, Toolbars. If you haven’t already done so, close the Code View tool- bar from Hour 8, “Cracking the Code: Working in Code View,” and open the Tables toolbar (see Figure 9.2). It docks underneath the Common toolbar.
ptg7913109 Before going any further, the table needs some content. The five columns represent
the five values Camera Name,Camera Type,Recording Medium,Lens Type, and Year of Purchase. To insert the table headings for these titles into the first row, select the upper-left corner cell by clicking inside it and start typing. As you write, the cells expand to the right. This is because the cell width and height in a default table is set to auto so that it conforms to whatever content you insert. To move to the next cell, press the Tab key on your keyboard, click the next cell with the mouse, or use the arrow keys. Fill in the next two headlines.
To save you the time of filling in the rest of the table, I created a version of the lesson file completed to this point that you can install directly from the lesson files for this hour. Simply close the myCameras.html file, import the new myCameras.html file from the lesson files, overwrite the old one, and open the new file.
Changing the Appearance of a Table
When you create a table from scratch, it is set to default. That means all the text in the cells aligns to the left and centers in the vertical space and that all the text looks the same. With the tools built into Expression Web 4, you can easily change these settings to change the look of your tables.
Creating Table Headings
The first row of your table contains the headings that explain the content below. The markup should reflect this by using the <th>(table heading) tags for the cells instead of the regular <td>(table data) tags. You can do this either manually in Code View or by using the Quick Tag Editor. When the table heading tag is applied, the text appears centered in the cell and the font is bold.
If you don’t like this appearance and want to change the heading row, you first need to select all the cells in the row. You can do this in two ways: Click and hold inside the first cell and drag your mouse over the four others. When the mouse pointer is out of the first cell, it changes to a + sign indicating that you are selecting more than one cell. You can use this technique to select groups of cells from rows, columns, or both.
Alternatively, you can right-click any of the cells in the row and click Select, Row (see Figure 9.3).
With the row selected, you can change the appearance of the entire row of table headings. For example, you can change the background color of the cells by clicking the Fill Color button on the Tables toolbar and selecting a new color (see Figure 9.4).
FIGURE 9.2 The Tables tool- bar contains most of the tools you need to edit your table.
ptg7913109
Changing the Vertical Alignment of Cell Content
By default, all the content in a table centers vertically in the cells. This looks strange when some cells have one line of text and others have several. To change the vertical alignment of the cells, select the remaining cells using the click-and-hold technique and click the Align Topbutton on the Tables toolbar.
You can choose to align text to the top, center, or bottom of the cells.
FIGURE 9.3 You can select a row by right- clicking a cell and choosing Select, Row.
FIGURE 9.4 The Fill Color button on the Tables Toolbar lets you pick the background color for the cells selected from a selection of pre- defined colors or with a color picker.
ptg7913109
Adding Rows and Columns to the Table
When you create a table, you often find that you need to add more rows or columns. If you want to add one or two, the quickest way is to use the Tables toolbar. To add a new row below the last row of your table, select any of the bottom cells and click the Row Belowbutton on the Tables toolbar. You can also add a row above the selected row by clicking the Row Abovebutton. To add a column, you click either the Column to the LeftorColumn to the Rightbutton.
If you want to add several rows or columns, select the cell in which you want to cre- ate new rows or columns next to and choose Table, Insert, Rows and Columns from the menu bar, or right-click and select Insert, Rows and Columns from the context menu. This opens the Insert Rows or Columns dialog, where you can set how many rows or columns you want and whether to insert them above, below, to the left, or to the right of your selection (see Figure 9.5).
FIGURE 9.5 The Insert Rows or Columns dia- log lets you insert multiple rows or columns in your table.
Merging and Splitting Cells
Sometimes it is necessary to merge cells to display certain types of content within the table. Let’s say you want to insert a subheading in the table to go underneath the heading and across the whole table. If you simply insert a new row underneath the heading, you still have five columns to work with when you need only one. To insert a subheading in your table, first insert a new row underneath the heading using the Row Below button. Note that if you chose a fill color for the heading row, the styling (color) is automatically copied down to the new row. After inserting the new row, select all the cells in that row and click the Merge Cellsbutton on the Tables toolbar. Doing so merges the five cells into one. Now, you can insert a subheading that goes across the entire table.
Likewise, you can split a cell into several new rows or columns using the Split Cellbutton. After you select a cell and click the button, Expression Web 4 asks how many rows or columns you want to create within that cell.
ptg7913109
Deleting Cells, Rows, and Columns from the Table
Now that you know how to add rows and columns to a table, you need to know how to remove them. To delete a cell, right-click the cell and select Delete, Cell from the context menu or click the Delete Cellsbutton on the Tables toolbar. Both actions delete the cell in question, and the remaining cells shift to the left to accommodate the deletion. Deleting a cell leaves an empty space filled with the background color.
To delete a row or column, right-click inside a cell on the row or column you want to delete and then select Delete, Row or Column or select all the cells in the row or col- umn you want to delete and click the Delete Cells button on the Tables toolbar.
Expression Web 4 deletes the row or column, and the remaining rows or columns realign themselves to fill the void.
Did you Know?
You can also merge and split cells by highlighting them, right-clicking, and select- ing Modify and Merge Cells or Split Cells from the pop-up menu.
If you delete a cell, row, or column, you also delete all the content within it. Watch Out!
To delete an entire table, you can right-click anywhere inside the table and select Delete Table; Expression Web 4 deletes the table.
Changing Row and Column Sizes
When you first entered text into the cells in your table, you noticed that the width of the columns changed accordingly. The same thing happened with the height of the rows when you entered several lines of text in one of the cells. This is because both row heightandcolumn widthare set to AutoFit by default. In most cases, you want to manually control the height and width of your rows and columns to achieve a cer- tain look. You can do this in several ways.
The first method uses the Distribute Rows EvenlyandDistribute Columns Evenlybuttons on the Tables toolbar to make changes to the whole table. To use one of these buttons, simply place your cursor anywhere inside the table and click the button. The program gives the rows or columns an even distribu- tion based on their content and gives them a fixed height or width. To revert to AutoFit, simply click the AutoFit to Contentsbutton.
ptg7913109 The second method is a more direct approach in which you manually set the width
and height of each row or column by grabbing the margins of the table cells by click- ing and holding them with the mouse and pulling them up, down, left, or right.
When you let go, the width and height are permanent just like in the first method, but they are now set to your specifications rather than evenly distributed.
You can also use the second method to resize the entire table. By default, the table width setting is 100% so that the table fills whatever area it is in (no area is yet defined, so the table fills the entire width of the screen), but you can change this by grabbing the sides of the table and resizing it.
The table’s content defines the minimum size of a table and its cells. In other words, a cell cannot be smaller than the size of what is inside it. For example, a cell with three lines of text cannot be the height of a cell with two lines of text.
Even if you set the height in pixels to be smaller, the cell remains tall enough to fit its contents. And because rows are the height of the largest cell, the content of the largest cell, not the pixel value, decides how tall each row will be. The same goes for the table as a whole. You cannot make the table smaller than the size of its contents no matter how hard you try. This is one reason why tables are not ideal as layout tools.
By the Way
Using Table Properties to Change the Appearance of Your Table
If you want to make changes to the size or appearance of the entire table, you need to open Table Properties by right-clicking anywhere inside the table and selecting Table Properties or selecting Table, Table Properties on the menu bar. From here, you can change all the main aspects of your table (see Figure 9.6).
The Size setting lets you define how many rows and columns the table should have.
The Layout setting sets the alignmentandfloatof the entire table in relation to the page, the width and height of the table in pixels or percentages, and the cell padding and cell spacing.
Cell paddingis the space between the walls of the cell and the content within it (see Figure 9.7). Cell padding of 0 pixels means that the content of the cell is touching the four walls, whereas cell padding of 5 pixels leaves an empty 5-pixel “buffer zone”
between the walls and the content. Cell spacing, as shown in Figure 9.8, is the space between the cells that separate them from each other. Cell spacing of 0 pixels means that the cells touch each other, whereas cell spacing of 5 pixels means there is a 5-pixel gap between each cell. Cell spacing is especially useful if you want to create a table with clearly defined borders between the cells because the cell spacing area is transparent and shows the background color of the table.
ptg7913109 FIGURE 9.6
From the Table Properties dialog, you can make changes to the table as a whole.
Thealignmentandfloatattributes serve the same purpose: to place the table on the left or right side of the page. The alignment(oralign) attribute is depre- cated and is replaced by the CSS floatattribute. Therefore, I recommended that you use floatto align your table.
Watch Out!
FIGURE 9.7 Other than the use of cell padding, these two tables are the same. The cells have a white background color, and the tables have a gray back- ground color.
FIGURE 9.8 The cells in these two tables use different values for cell spacing.
The cells have a white background color and the tables have a gray background color.