Chapter 11
Using Tables
Key Skills & Concepts
    Understand the Concept and Uses of Tables in Web Pages
    Create a Basic Table Structure
    Format Tables Within Web Pages
    Format Content Within Table Cells
image
At this point in the book, you’ve made it through the majority of the basic tags used to create web pages. The next few chapters deal with content that can sometimes seem a bit more complicated than tags for lists and links. Don’t worry, though, because even the pros struggled with these concepts when they first start (myself included).
Understand the Concept and Uses of Tables in Web Pages
Although you might not recognize the terminology, you have undoubtedly seen tables in other printed or electronic documents. In fact, throughout the course of this book, I’ve used tables to give order to certain sections that might otherwise be confusing. Quite simply, a table is a section of information, broken up into columns and/or rows of blocks, called cells.
Those of you who use Microsoft Word may be familiar with a menu item in that program called Table that enables you to create tables just like those used in web pages. Microsoft’s word processor isn’t the only one with tables. Most word processors are capable of letting you format content in tables.
TIP
image
When considering whether or not to use a table in a web page, first think of how you’d present that same information in a standard word processing program. If you’d use a table in the word processor, you likely should use one in your web page as well. If not, consider another method of presenting that information in your web page.
Another form of a table, either printed or electronic, is the spreadsheet. Along these lines, you might think about a table as a large piece of grid paper, where you get to decide the size of the cells that will hold the information.
To make decisions about how large or small your cells and table should be, you need to do a little planning. Even though HTML tables are created in digital documents, the best way to plan out tables is to use a pencil and paper when you’re first learning. As you become more familiar with the structure of a table, you may be able to plan it in your head without first drawing it.
Let’s first consider what a table would look like for a simple tic-tac-toe game.
1.  Draw a large box on your piece of paper.
2.  Divide that box into three columns and three rows.
3.  Place an X or an O in each of the boxes, leaving no boxes empty.
Following these steps will probably get you a piece of paper with a drawing similar to mine.
image
Now, imagine you want to translate this tic-tac-toe game into a web page. How would you do that? You’ve already learned that in HTML, you cannot simply tab over to the next column and type an X as you might in a spreadsheet application. You can, however, use a table to lay out the tic-tac-toe game’s structure.
Create a Basic Table Structure
First, decide how large you want your table, or in this case, how large you want your tic-tac-toe game. Remember, pixels are the units of measure on the screen; inches or centimeters won’t get you far in HTML. In the beginning, it’ll probably be useful for you to write out your measurements on your drawings. Don’t worry, though. Nothing you’re doing now is set in stone. You’ll be able to make changes later as needed.
image
After planning out the dimensions of the table, it’s time to get started working on the table structure in HTML.
Table Structure
You need to know about four basic table tags, as described next:
image
With these tags in mind, you can create both basic and complex table structures according to your needs. Say you want to create a basic table structure, such as the following:
image
Your code might look like that shown next:
image
NOTE
image
While you’re not required to indent your td or th tags, I did so here to help you differentiate between table rows and cells.
Opening and closing table tags surround the entire section of code. This tells the browser that everything inside these tags belongs in the table. And there are opening and closing tr tags for each row in the table. These surround td or th tags, which, in turn, contain the actual content to be displayed by the browser.
NOTE
image
Some browsers show a border around each cell by default. I discuss more about borders in the section titled “Borders and Margins.”
Cell Content
You can include nearly any type of content in a table cell that you might include elsewhere on a web page. This content should be typed in between the opening and closing td tags for the appropriate cell. All tags used to format that content should also be included between the td tags.
TIP
image
Want to include a blank cell with no content? Type the code for a nonbreaking space ( ) between the opening and closing td tags, and your cell will appear blank. If you have a lot of blank cells, you could add empty-cells: show; to the style declaration for your table tag.
If we return to our tic-tac-toe game, the following is the markup for that table:
image
If you were to create a basic HTML page with this code, save it, and preview it in your browser, you’d see something like the following:
image
By default, the size of each cell is only as large or as small as the content of the cell. (We’ll talk about changing the size of the cell shortly.) If you typed three Xs or Os in each cell and added a sentence in the center cell, the table would change to look like that shown next:
image
After a certain number of characters, the browser may wrap the content. This means it stops printing on that line and continues on the next line. This usually doesn’t occur until the table runs up against another element within the page or hits the edge of the window. The default point at which the content wraps varies according to the browser.
Text
You can customize the text within each cell using the elements you learned in previous chapters. For example, you can use the strong element to add emphasis and make the text within a cell bold:
image
image
Enclosing the words “tic-tac-toe board” in the center cell with the opening and closing versions of the strong element tells the browser to add emphasis to the text and make it bold.
image
If you want to make all the text in every cell take on the same characteristics, the best solution is to use a style sheet with the td tag as the selector. For example, the style sheet in the following example can be placed between the opening and closing head tags to change the face and size of text within all the cells created by td tags throughout the entire page:
image
Images
You can also add images to any of the cells in your HTML tables. To do so, add the image reference (using the img element) inside the cell in which you want it to appear. In the following example, I used a graphic of an O instead of text wherever the O appeared in the game board:
image
image
When viewed in the browser, the image Os appear where the text Os used to appear, as shown next:
image
You can also combine text, images, and other types of media (such as animation, sound, and video) within table cells by drawing on many of the elements discussed in previous chapters. The key is determining which pieces go in which cells.
Format Tables Within Web Pages
You may have noticed by now that all the text in a table appears aligned to the left side of each cell. This, and many other features of a table, can be easily customized with your style sheet.
Borders and Margins
Tables, by nature of their design, have internal and external borders. By default, most browsers set the border size to zero, making them invisible. However, borders can be quite useful for tables of statistical information, for example, where it’s necessary to see the columns to understand the data better. The key is understanding the three attributes related to the use of these borders.
TIP
image
When a table with borders is viewed in a text-based browser (i.e., a browser set to display plain text only, with no extra formatting or images), the borders are represented as dashes for the horizontal borders and as pipes (|) for the vertical borders.
The border Attribute
Even if you ultimately want your table borders to be invisible, a great way to see how your table is shaping up while you’re building it is to turn on all the table borders temporarily. You can do so by adding the border attribute to the opening table tag and specifying a value of 1:
image
Changing the border size to 1 for my tic-tac-toe table lets you see more clearly where each cell begins and ends because it turns on all the internal and external borders. The border attribute accepts values of 0 and 1 to turn the borders off or on, respectively.
image
Border Properties
You can also use the border properties in a style sheet to format the borders of your tables, specifically the border-width, border-style, and border-color properties. See Chapter 3 for details.
The latest version of the CSS specification also provides an additional style sheet property to alter table spacing in web pages. Specifically, the border-collapse and border-spacing properties are useful when you need to eliminate or customize the space between the cells. The border-collapse property might be used in either of the following two ways:
    border-collapse: collapse Turns off all the space between the cell borders.
    border-collapse: separate Maintains the space between the cell borders.
When the border-collapse property is set to separate, you then use the border-spacing property to specify exactly how much space should be included:
image
In this code example, I’ve told the browser to maintain space between the cell borders, and then specified exact dimensions for that space. If two units are included—as they were here—then the first identifies the horizontal space and the second identifies the vertical space. When only one unit is listed, it is used for both the horizontal and vertical space measurements.
Spacing Properties
You can also use the padding and margin properties with style sheets to format the spacing in and around table cells. Note that entire tables can be styled with both the padding and margin properties, while individual cells can include padding, but no margins. Refer to Chapter 3 for details.
Width and Height
When I first introduced tables, I mentioned planning out the size of your tables ahead of time. This is particularly important if the table you are creating needs to fit within a predetermined amount of space on your page. When adding tables to your pages, it is considered good practice to specify the size of the table with the height and width style sheet properties. If you don’t specify them in your code, the browser chooses the size based on the amount of content within each cell and the amount of available space in the window, which means it may or may not display the table as you expect.
Let’s say I want to include that tic-tac-toe game in my web page, but I only had an available space on my page that measured 200 pixels wide by 200 pixels high. Because tables have a tendency to “grow” according to the amount of content in them, I might want to restrict the height and width of my table to avoid it growing out of that 200 × 200–pixel area I designated for it. I could do so by specifying the dimensions in my style sheet. Provided there was only one table element on my page, I could even use table as my selector:
image
NOTE
image
If there were multiple tables on my page, I could style each one independently by adding the class attribute to each opening table tag and then styling the classes uniquely in my style sheet.
In this case, I would specify an absolute size for my table, one that shouldn’t change if the browser window were larger or smaller.
image
On the other hand, if I didn’t care about the exact measurements of my table, but I only wanted it to take up 50 percent of the window and no more, I could use a percentage in the value of those attributes:
image
This is called relative sizing because I’m not specifying absolute pixel dimensions but, instead, sizes that are relative to the browser window opening. Compare the next two illustrations to see how, with relative sizing, the table size varies according to the window size.
image
Ask the Expert
Q:  Wait! When I try that, my table doesn’t fill 50 percent of the screen vertically, only horizontally!
A:  If you’re following along by typing these code examples into your own HTML editor and then viewing the pages in your own browser, you may have hit a snag when trying to duplicate my example of a table set to 50 percent of the browser window’s height. Never fear—there is an explanation for this problem, and it lies in how your browser actually defines what 100 percent of the height is.
You see, when you specify that the table should be 50 percent, most browsers read that as “50 percent of the parent object.” In this case, the parent object is the HTML page itself. Because HTML pages aren’t block-level elements, they don’t automatically fill all the available space. This causes a dilemma if you want your table to fill half the screen, especially when the browser thinks the “screen” stops as soon as your page content does.
The solution is to add a simple bit of code to your style sheet to force the browser to behave like a block-level element, or rather to fill the entire browser window, regardless of the amount of content visible:
      image
Once you’ve done that, the height:50% declaration will actually work on your table tag!
Basic Alignment
As discussed in Chapter 8, you can use the float property to cause an image, or in this case a table, to be aligned to the right or left of any surrounding text. If only one table exists on the page, you can even use the table element as your selector, like this:
image
The following illustration shows our tic-tac-toe table aligned to the right of the window, with text flowing around it on the left. The complete source of the page is also listed here to give you a better idea how the style sheet affects the table formatting.
image
image
image
Colors
To change the background color of an entire table, you can add the background-color property to your style sheet, using the table tag as the selector. The following example shows how this might look in an internal style sheet, supposing the table you’re formatting is the only table on the page:
image
image
But what if you did have several tables on your page? Be aware that using the preceding code would cause all tables on the page to be rendered with the same background color. To create specific styles for each table on a page that included multiple tables, you might use classes:
image
Then, you’d reference the class name (without the period) from the opening table tag, as in
image
Depending on which browser renders the table, the background color you specify may or may not appear within the borders. Test your pages in multiple browsers to be sure.
Background Images
The background-image property can be added to your style sheet to apply an image to the entire table background. The background-image property works the same when applied to a table as it does applied to other web page objects. This means it automatically repeats from left to right, top to bottom. However, you can use the other background properties discussed in Chapter 8 (such as background-repeat and background-attachment) to change the repeating options if desired.
Adding a background image is one way you could achieve a textured or patterned table background, as shown in Figure 11-1. This only requires a small repeating image, such as the following:
image
image
Figure 11-1   The background-image property can be applied to the table to produce a patterned effect.
image
and a bit of code added to your style sheet:
image
Captions
The caption element enables you to specify captions for your tables. This isn’t an attribute of the table element; it’s a stand-alone element used after the opening table tag but before the first table row. Here is the first portion of the table markup:
image
Opening and closing caption tags surround the actual text you want to display as a caption for the table. By default, the caption is aligned at the top-center of the table. Two CSS properties are useful in changing the caption alignment:
    text-align Use this to adjust whether the text is aligned left, right, or center on whichever side it is placed.
    caption-side Use this to specify on which side the caption should be placed (top, right, bottom, or left).
With those properties in mind, can you figure out how to align a caption along the bottom edge of a table and then set the text to be right-aligned along that edge? Figure 11-2 shows a visual example, and the following code provides the answer:
image
image
image
Figure 11-2   The caption element is styled to specify the exact alignment of the text in the caption.
TIP
image
You can also use additional formatting properties to draw more attention to a caption, such as making it bold or different colors.
Try This 11-1
Create a Basic Table
Tables are particularly useful for allowing customers to compare products and/or services. You’ll use the skills you just learned to add such a table to a web page. Goals for this project include
    Creating a basic table structure
    Adding text content to the table structure
    Formatting the table
1.  Open your text or HTML editor and locate a page where it would be appropriate to add a table of services or products.
2.  Create the table on the page, using the following table as a guideline. Note the first row is a table header row.
image
3.  Specify a border size of 1.
4.  Add a Level 1 headline above the table, as well as a brief paragraph explaining its purpose.
5.  Save the file.
6.  Open your web browser and choose File | Open Page (or Open File or Open, depending on the browser you’re using). Locate the file you just saved. Make sure it appears as you want.
7.  If you need to make changes, return to your text editor to do so. After making any changes, save the file and switch back to the browser. Choose Refresh or Reload to preview the changes you just made.
NOTE
image
Is your table missing when you try to view the page? If so, check to make sure you have closed your table tag (</table>). For more tips, see Appendix C.
Tables are used in a wide variety of ways throughout the digital and print industries. This project gave you practice creating a basic table structure, using a product/service comparison chart as the basis for your table.
image
Format Content Within Table Cells
Just as you can format the entire table, you can format each of the individual cells within the table. This means changing the alignment, width, height, and background colors, as well as restricting line breaks and spanning content across multiple columns or rows.
Alignment
If you refer to the table you created in Try This 11-1, you may notice the alignment appears different for some of the cells, depending on how much content is in each cell and how wide the browser window is open. For example, the cells in the first row might contain text that is centered, while the remaining cells in the other rows might be left-aligned.
To change vertical and horizontal alignment, you can add the text-align property for horizontal alignment or the vertical-align property for vertical alignment to the tr, th, or td tags.
    tr Adding the text-align or vertical-align properties to the opening tr tag causes the alignment you specify to take effect for all the cells in that row.
    td, th Adding the text-align or vertical-align properties to an opening td or th tag causes the alignment you specify to take effect for only that cell.
Table 11-1 lists the possible values for these two properties when used in tables.
image
image
Table 11-1    Text Alignment Options for Tables
NOTE
image
The default values for the text-align and vertical-align properties are left and middle, respectively. For header cells (using the th tag), however, the horizontal alignment defaults to center instead of left.
If you want to align all the cells in your table in a similar manner, it’s easy to use the td tag as the selector in your style sheet in the following manner:
image
But what if you wanted each column of cells to be aligned differently? You could create three classes:
image
and then reference each class from within the appropriate td tag. Figure 11-3 shows the result of this type of style sheet when applied to our tic-tac-toe board.
image
image
Figure 11-3   Three different classes were created to align the cells of this table in three different ways.
image
Width and Height
Earlier in the chapter, you used the width and height properties to identify the size of the entire table. You can also specify the size of individual cells by adding those properties to your td or th tags.
TIP
image
This can be particularly useful if you want to have columns that are the same size, because most browsers won’t make columns the same size when the width is left unspecified.
You may remember that the value of these two attributes can be dictated by either a pixel length or a percentage. This is the same regardless of what element is being sized. However, use caution when mixing pixel values with percentages because you might get unpredictable results in different browsers.
Look at the table in the following example. Although the table itself has a width set to 100 percent of the window opening, none of the cells have width dimensions. This leaves the decision about how wide each cell should be up to the browser.
image
If I want to make all three of the columns the same width, regardless of what size the browser window is, I could specify in my style sheet that each th tag should be one-third of the overall table width:
image
Then, each of the following cells in that column will have the same width (and/or height). An exception to this rule might be when one cell contains an extremely long string of text without spaces, such as “abcdefghijklmnopqrstuvwxyz.” In this case, the browser may have to make that cell larger, as necessary, to accommodate the long string of text.
It isn’t necessary to place width properties in every cell in a column—only the first one. Also, if you set the width two columns, the third will simply use the remaining available space. In the end, I recommend testing your pages in multiple browsers to verify that the table appears as you intended.
image
Cell Padding
While table cells don’t have margins (at least not by CSS standards), they do have padding. This means if you want to have some buffer space around the content of your cells (padding), you can add the padding property to your style sheet declaration.
Using the padding property for tables is the same as using it for other HTML elements, as was discussed in previous chapters. So, if you wanted to add 10 pixels of padding around each cell, the style sheet might look like this:
image
image
Can you imagine how you might achieve 10 pixels of padding only on the top and bottom edges of each cell? There are a couple of ways to do it, but I like to simply specify the padding in pairs, where the first number lists the top and bottom padding, and the second number lists the left and right padding. Check it out:
image
Colors
While adding the background-color property to a table style declaration lets you change the color for the entire table, using this property with the tr, td, or th tag lets you specify the color of a single row or cell:
image
Coloring rows or columns in a table with different hues can be a great way to make the table more readable, particularly if it’s a long table. Style sheets make it easy to create such patterns through the use of classes. Consider the table shown in Figure 11-4. If you had to add the style declarations to each row in the table, it could become quite cumbersome as the table grew to include more rows. Instead, create the two classes in your internal or external style sheet:
image
image
image
Figure 11-4   Style sheets and classes make it easy to create rows of alternating colors like these.
and then reference each one in alternating rows of your table.
TIP
image
When naming classes, stick with names that reference the purpose of the class, as opposed to the style of the class. For example, avoid a name like “bluerow” and “orangerow” because these would become confusing if you ended up changing the colors of the rows. Instead, try “hilight” and “lolite” for alternating color rows like these.
image
NOTE
image
When you include background colors for both individual cells and the entire table, the background color of the table may also show through in between the cells (in the border). However, this does vary somewhat from browser to browser. My advice to you on this topic is to test your pages in a wide number of settings to make sure you’re happy with how they look under each different browser.
Prohibit Line Breaks
At times, you might have content in a cell that needs to be kept on a single line. In cases like this, you can use the white-space property with a value of “nowrap” to tell the browser to try and keep all the content in that cell on a single line if possible. (This might not be possible if the browser window is so small that the content cannot be rendered across a single line.) The style sheet might look like the following:
image
while the only change to the HTML table is the addition of the class reference:
image
Spanning Columns
So far in this chapter, you have only worked with tables in a grid-like fashion where an equal number of cells is in each row and column. While this is the default, you can add an attribute to an opening td or th tag to cause it to merge with another cell below it, as shown here:
image
To accomplish this, use the colspan attribute. By default, each cell is set to span, or to go across, only one column. Using the colspan attribute enables you to change that, so that a cell spans two or more columns. The following HTML shows how you might code the preceding table:
image
Span Rows
Just as you can merge cells across two or more columns, you can merge cells across two or more rows. The attribute used to do so is rowspan.
If you take the table used in the preceding section and merge the two cells on the right (#3 and #6) into one, the table might look like that shown next.
image
Here you have two cells in the first row merged, while the third cell from the first row is merged with the third cell from the second row. Here is the HTML used to create this table:
image
The rowspan attribute can be used by itself in a td tag to cause a cell to merge with the cell below it, or it can be combined with the colspan attribute to cause a cell to merge with both the cell below it and the one next to it.
Although the colspan and rowspan attributes give web developers a lot of power to build creative table structures, they add a degree of complexity to tables that’s often difficult to grasp. Don’t worry—everyone struggles with these concepts at first. If you have trouble, go back to using your pencil and paper to plan out your table structure before you type a single key.
TIP
image
If you have a picture in your mind of the final output of your table, draw that first. Then, go back and add the table or grid structure around the picture, placing each piece into a cell or a group of cells. This is also one of the places where a visual HTML editor may come in handy because it enables you to see the table while you’re creating it.
Additional Formatting Techniques for Tables
HTML has additional tags geared toward helping web developers build more user-friendly tables. These tags and attributes enable you to group rows and/or columns so that the browser more clearly understands the purposes of each element.
Group Rows
Three tags in particular are used to group rows within tables:
    thead table header
    tfoot table footer
    tbody table body
When you use these tags, the browser is able to differentiate between the header and footer information and the main content of the page. The benefit here is that when a user views a page containing a long table, the header information is repeated at the top of each page or screen view of the table, even if the table is printed. This helps users avoid wondering what column three was supposed to hold, when they are looking at page four, and the title of column three was only listed on page one.
While these three tags are never required, when they are used, each must contain at least one table row, as defined by the tr tag. In addition, if you include a thead and/or a tfoot, you must also include at least one tbody. So, a table layout using these three tags might look like this:
image
image
An additional benefit of using these tags is that it helps make styling the table easier. For example, suppose you wanted to format the data rows of your table in one way, the header in a different way, and the footer in yet another fashion. As long as the thead, tbody, and tfoot tags are in place, you only need to reference those tags in your style sheet to do so. Figure 11-5 shows how the preceding code would be viewed in a browser when the following style sheet is also included:
image
image
Figure 11-5   When you use the thead, tbody, and tfoot tags, styling table rows becomes a snap.
image
Group Columns
Along the same lines, you can group columns together with the col and colgroup elements. Browsers that understand these tags can then render the table incrementally, instead of all at once. This causes long tables to load more quickly than they might otherwise. In addition, using colgroups enables you to apply styles and characteristics to entire sections of columns, as opposed to doing so individually.
TIP
image
Simply stated, the colgroup and col elements are ways to pass information about structure and style on to the browser in the beginning of the table in order to help render it.
The opening and closing colgroup tags enclose one or more columns in the group and can dictate how those columns should be rendered. This means you can use the colgroup tag as a selector in your style sheet to format all the columns in that group the same way. You can also add the span attribute to this tag to tell the browser how many columns should be included in the group.
NOTE
image
If you had both colgroups and theads, the colgroups would be placed before the theads in your table structure.
In this example, the first colgroup contains five columns, while the second colgroup contains two columns. You can see the colgroup tags are placed at the top of the table, before all the table rows and table cells.
image
Each colgroup in this example also has an ID assigned: group1 and group2. If you make formatting specifications in the corresponding ID style declaration, they take effect for all the columns in that group. If you need to alter the width or alignment of specific columns in the group, you then only have to make the change once in the style sheet. The following shows what a style sheet might look like to make all the columns in group1 50 pixels in width, while those in group2 are 25 pixels wide:
image
In this next example, there are two groups of columns in a table about adventure trips at a summer camp. In this case, the colgroups aren’t set up to handle width as much as background colors. The first group contains two columns, one for each of the camp sessions available. The second group contains three columns for the information about trips offered during each session. The session columns are styled with different background colors. In addition, two classes are created to handle capitalization and text alignment styling.
image
image
The table then continues with the rest of the cell data. You can see how it all turned out visually in the following illustration.
image
NOTE
image
As of this writing, the only aspects of cols or colgroups that can be styled are borders, background, width, and visibility. Unfortunately, this means you can’t use a colgroup to adjust the alignment of all the cells in that column (wouldn’t that be nice!). The only way to do that is to add a class to each cell you want to style, and then use the text-align property with that class in your style sheet.
Whether used in the colgroup or col tag, column width can be specified as demonstrated in Table 11-2.
image
image
Table 11-2    Setting the Column Width
Try This 11-2
Format Cell Content
Returning to the services page you began in Try This 11-1, let’s format some of the individual cells and add a horizontal rule that spans the entire width of the table. Goals for this project include
    Changing the alignment of content within table cells
    Causing a cell to span across multiple columns
  1.  Open your text or HTML editor and open the file used in Try This 11-1.
  2.  Create two column groups—one for the feature column, and one for the product columns.
  3.  Assign IDs to each column so that you can reference them from your style sheet.
  4.  Style the first column to have a colored background.
  5.  Style the second column group to have a different colored background.
  6.  Style the table header rows to have a very dark background color with white (or very light) text.
  7.  Add a four-pixel padding to the table cells for a bit of buffer space around the content.
  8.  Adjust the border to display only the outside box around the table and the horizontal lines between each row (but not the vertical lines between the columns).
  9.  Save the file.
10.  Open your web browser and choose File | Open Page (or Open File or Open, depending on the browser you’re using). Locate the file you just saved. Make sure the file appears as you intended it.
11.  If you need to make changes, return to your text editor to do so. After making any changes, save the file and switch back to the browser. Choose Refresh or Reload to preview the changes you just made.
NOTE
image
Feel free to experiment with other types of formatting as you see fit for your particular table design.
Although somewhat complex in nature, these formatting techniques help you build more creative tables than might otherwise have been possible. In addition, formatting techniques such as adjusting alignment, colors, and sizes are ways to draw attention to cell content. This project gave you practice working with many of these features.
image
Chapter 11 Self Test
image
  1.  What is the difference between the td and th elements?
  2.  The td and th elements are contained within which other table tag (aside from the table tag itself)?
  3.  How do you force a cell’s contents to display along a single line?
  4.  What should be the value of the border attribute to turn on a table’s borders?
  5.  True/False: You cannot use other HTML tags between opening and closing td tags.
  6.  Fill in the blank: The ______________ property affects the space around the content of each individual table cell.
  7.  Fix the following code:
image
  8.  What are two types of measurements you can use to identify a table’s width?
  9.  Add the appropriate code to cause this table to fill the entire browser window, regardless of the user’s screen size.
image
image
10.  Fill in the blank: You can add the ____________ property to your style sheet to change the background color of the whole table.
11.  True/False: To add a caption to a table, you use the caption attribute in the opening table tag.
12.  If you include a thead or a tfoot group in your table, you must also include which other group?
13.  Which CSS property (and value) is used to align all the text in a cell to the right?
14.  True/False: If you had both colgroups and theads in a single table, the colgroups would be placed before the theads in your table structure.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.178.9