Chapter 4

Session 4.1       Session 4.2      Session 4.3

Session 4.1

1. What are the two kinds of tables you can place in a webpage?
• Text table and graphical table
2. What is the difference between a proportional font and a fixed-width font? Which should you use in a text table and why?
• A proportional font uses proportional widths for the individual letters assigning a wider space for a wide letter like W and a small space for a narrow letter like I
• A fixed-width font uses the same width for every font
• You should use a fixed-width font for a text table to align the columns properly
3. Which HTML tag would you use to create preformatted text?
• <pre></pre>
4. Define the purpose of the following HTML tags in defining the structure of a table:
<tr>…</tr> -- Creates a table row <td>…</td> -- Creates a cell in a row and thereby a column <th>…</th> -- Creates a row or column heading
5. How do you specify the number of rows in a graphical table? How do you specify the number of columns?
• The number of rows are specified by the amount of tags of type <tr>
• The number of columns are specified by the number of tags in a row of type <td>
6. What are the three row groups and how do you create them?
• The three row groups are table header, table footer and table body <thead> <tfoot> <tbody>
• The table header must be created before the footer and the header, and the table footer and header must be created before the table body. You can only have one table header and one table footer, but multiple table bodies
7. What HTML code would you use to place the caption "Product Catalog" below a table? Where must this HTML code be placed in relation to the opening table tag?
• <caption align="bottom">Product Catalog</caption>
• The tag must be placed immediately under the opening table tag

Session 4.2

1. What attributes would you use to create a table with a 5-pixel-wide outside border, a 3-pixel-wide space between table cells, and 4 pixels of padding between the cell content and the cell border?
• <table border="5" cellspacing="3" cellpadding="4"></table>
2. What attributes would you use to vertically align a cell's contents with the top of the cell?
• <td valign="top">
3. What HTML code would you use to size a table to half the width of the browser window area, regardless of the resolution of a user's monitor?
• <table width="50%">
4. Under what conditions will a table cell exceed the size specified by the width attribute?
• It will exceed the size specified by the width attribute if the content is bigger and the nowrap attribute has been used or there is no spot in the content to break the line.
5. What attribute creates a cell that spans three rows and two columns?
• <td colspan="2" rowspan="2">
6. What HTML code would you enter to create a column group spanning three columns that sets the background color of the column to yellow?
• <colgroup span="3" style="background-color: yellow">

Session 4.3

1. What is a columnar layout? Can text float from one column to another in such a layout?
• In a columnar layout, the content is laid out in two or more columns, similar to the layout of a newspaper.
• The content cannot float from one column to another, but has to be copied over manually when the size of the text changes.
2. What is a jigsaw layout? What cell spacing values should you use in such a layout?
• A jigsaw layout is a layout with a table, where all the individual pieces are put together like a puzzle, with each puzzle piece in an individual cell.
• You should use a cell spacing of 0px so all the "jigsaw pieces" fit seamlessly together
3. What is a fixed width layout?
• In a fixed width layout you enter an absolute width for the table, eg. 800px
• If the table has a fixed width, you can define the layout to the pixel
• It can be a bad choice if the user has a resolution either smaller than the table (content will be cut off/horizontal scrolling) or bigger (content looks lost occupying just a small part of the screen)
4. What is a fluid layout?
• In a fluid layout you enter an relative width for the table, eg. 70%
• The look and feel of the layout changes with different window sizes and different resolutions
5. Why can tables be difficult for aural (non-visual) browsers?
• Because aural browser usually cannot access the content of a table
6. What HTML code would you use to create a 2 x 2 table nested inside the upper-left cell of another 2 x 2 table?
<table> <tr> <td> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>