CHS Web Design Track

Tutorial 6 Working with Tables and Columns

«Previous Lesson | Next Lesson »

Session 6.1 Visual Overview:

Objectives

  • Explore the structure of a web table
  • Create table heading and data cells
  • Apply CSS styles to a table
  • Create cells that span multiple rows and columns
  • Add a caption to a table
  • Create row and column groups
  • Apply styles to row and column groups
  • Display page elements in table form
  • Create a multi-column layout
Materials

Structure of a Web Table

Introducing Web Tables

Marking Tables and Table Rows

  • A table element contains a collection of table rows marked using the tr (table row) element
  • A table contains cells within each row
  • Size of a table is defined by
    • number of table rows
    • number of cells within rows
  • General structure of a web table:
    <table>
    <tr>
        table cells
    </tr>
    <tr>
        table cells
    </tr>
    …
</table>
To start working on the evening schedule page:
  1. Use your editor to open the dlr_evenings_txt.html file from the html06 › tutorial folder. Enter your name and the date in the comment section of the file and save it as dlr_evenings.html.
  2. Scroll down the document to the section element with the id “main” and add the following table and tr elements after the initial paragraph in the section.
    <table class=”schedule”>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
</table>
  3. Take some time to scroll through the rest of the document to become familiar with its content and structure and then save your changes to the file, but do not close it.
Figure 6-2 shows the placement of the table and tr elements in the document.

Marking Table Headings and Table Data

To mark table header cells:
  1. In the first row of the table you just created in the dlr_evenings.html file, create header cells by inserting the following th elements:
    <th>Time</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
     Note that since these headers cells are nested within a tr element, they will all appear within the same table row.
  2. In the second row of the table, insert the following th element:
    <th>6:00 PM</th>
  3. In the third table row, insert the header cell:
    <th>6:30 PM</th>
     These cells are the headers for your table rows.
  4. Save your changes to the file and then load dlr_evenings.html in your browser. Verify that the table shows three rows: the first row contains the text “Time” followed by the days of the week. The second and third rows display the 6:00 PM and 6:30 PM times. All text is displayed in a bold font.
Figure 6-3 highlights the newly added header cells in the table.
 
To mark table data cells:
  1. Within the second row of the table, add the following seven td elements after the initial th element:
    <td>National News</td>
<td>National News</td>
<td>National News</td>
<td>National News</td>
<td>National News</td>
<td>National News</td>
<td>National News</td>
  2. Within the third table row, insert another seven td elements listing the World News program after the initial th element:
    <td>World News</td>
                        <td>World News</td>
                        <td>World News</td>
                        <td>World News</td>
                        <td>World News</td>
                        <td>World News</td>
                        <td>World News</td>
  3. Save your changes to the file and then open the dlr_evenings.html file in your browser. Note that the header cells are displayed in a bold font while the data cells are not because of the default table styles employed by the browser.

    Trouble? If your table looks different from the one shown in Figure 6-5, you might have inserted an incorrect number of table cells. Check your code against the code shown in Figure 6-4.

Figure 6-4 highlights the newly added data cells in the second and third rows of the table.
Figure 6-5 shows the current appearance of the program schedule table.
 

Quick Quiz:

  1. True/False: In HTML, tables are considered to be inline elements.
    (Answer: False)
  2. True/False: The dimension of a table is independent of the number of rows and the number of cells within those rows.
    (Answer: False)

Adding Table Borders with CSS

  • The CSS border property is used to add borders to any part of a web table
  • Borders need not be of the same style
  • Two style choices for borders
    • Separate borders
    • Collapsed borders
  • To choose between separate or collapsed borders model apply the following property to the table element:
    border-collapse: type;
    where type is either separate or collapse
  • The separate borders model sets the spacing between borders using
    border-spacing: value
    where value is in CSS units of measure
  • The collapsed borders model
    • Borders from adjacent elements are merged together to form a single border
    • Borders are joined to combine their features
    • Combining adjacent borders with different widths, styles, or colors is complicated
  • Five rules to reconcile the differences between adjacent borders
    • If either border has a style of hidden, the collapsed border is hidden
    • Border style of none is overridden by another border style
    • The style of wider border takes priority over the narrower border if neither border is hidden
    • Double borders have higher precedence followed by solid, dashed, ridge, outset, groove and inset
    • If borders differ only in color, precedence is given to borders
    • Precedence to borders in decreasing order
      • Borders around individual table cells
      • Borders for table rows
      • Borders for row groups
      • Borders for columns
      • Borders for column groups
      • Borders around the entire table
To add borders to a table:
  1. Use your editor to open the dlr_tables_txt.css file from the html06 › tutorial folder. Enter your name and the date in the comment section of the file and save it as dlr_tables.css.
  2. Within the Table Styles section, add the following style rule to place a border around tables belonging to the schedule class:
    table.schedule {
    background: white;
    border: 10px outset rgb(153, 0, 153);
    font-size: 0.75em;
    width: 100%;
}
  3. Within the Table Cells Styles section, add the following style rule to place a border around each header cell and data cell within tables belonging to the schedule class.
    table.schedule th, table.schedule td {
    border: 1px solid gray;
}
  4. Save your changes to the style sheet and then reload to the dlr_evenings.html file in your editor.
  5. Within the document head and directly before the closing </head> tag, add the following link element to link the document to the dlr_tables.css style sheet: 
    <link href=”dlr_tables.css” rel=”stylesheet” />
  6. Save your changes to the file and then reload the dlr_evenings.html file in your browser.
Figure 6-6 highlights the newly added styles to create the table borders.
Figure 6-7 shows the revised appearance of the table with the newly added borders.
 
To collapse the table borders:
  1. Return to the dlr_tables.css file in your editor.
  2. Add the style border-collapse: collapse; to the style rule for the schedule table
  3. Save your changes to the style sheet and then reload the dlr_evenings.html file in your browser.
Figure 6-11 highlights the newly added style.
Figure 6-12 shows the appearance of the table with the collapsed borders.
 

Quick Quiz:

  1. True/False: In HTML, tables are considered to be inline elements.
    (Answer: False)
  2. True/False: The dimension of a table is independent of the number of rows and the number of cells within those rows.
    (Answer: False)

Spanning Rows and Columns

  • Spanning cells
    • Single cell that occupies more than one cell row and/or column
    • Created by adding rowspan and/or colspan attributes to td or th elements
    • Spanning starts in the cell with rowspan or colspan attributes and covers the cells in the right and below the initial cell
    • rowspan=“rows”
      where rows is the number of rows that the cell occupies
    • colspan = “cols”
      where cols is the number of columns that the cell occupies
To create a column-spanning cell:
  1. Return to the dlr_evenings.html file in your editor.
  2. Go to the schedule table and for the second table cell in both the second and third rows of the table, add the attribute 
    colspan=”7”
    to the opening <td> tag.
  3. Delete the remaining six table cells in both the second and third table rows to keep the size of those rows at eight total columns.
  4. Save your changes to the file and then reload the dlr_evenings.html file in your browser.
Figure 6-13 highlights the revised code for the schedule table.
Figure 6-14 shows the revised appearance of the table with column-spanning cells in the second and third rows.
 
To create row-spanning cells:
  1. Return to the dlr_evenings.html file in your editor.
  2. Directly above the closing </table> tag, insert the following table row:
    <tr>
    <th>7:00 PM</th>
    <td rowspan=”2”>Opera Fest</td>
    <td rowspan=”2”>Radio U</td>
    <td rowspan=”2”>Science Week</td>
    <td rowspan=”2”>The Living World</td>
    <td>Word Play</td>
    <td>Agri-Week</td>
    <td rowspan=”2”>Folk Fest</td>
</tr>
  3. Add the following row for the programs that start at 7:30 p.m.:
    <tr>
    <th>7:30 PM</th>
    <td>Brain Stew</td>
    <td>Bismarck Forum</td>
</tr>
  4. Save your changes to the file and then reload the dlr_evenings.html file in your browser.
Figure 6-16 highlights the revised code for the schedule table.
Figure 6-17 shows the schedule for programs airing at 7:00 p.m. and 7:30 p.m.
 
To enter the remaining programs:
  1. Return to the dlr_evenings.html file in your editor and, directly above the closing </table> tag, add the following table row for programs airing at 8:00 p.m.:
    <tr>
    <th>8:00 PM</th>
    <td rowspan=”4” colspan=”4”>The Classical Music
    Connection</td>
    <td>Old Time Radio</td>
    <td rowspan=”4”>Saturday Nite Jazz</td>
    <td rowspan=”4”>The Indie Connection</td>
</tr>
  2. The Inner Mind is the only program starting at 8:30 p.m. during the week. Add the 8:30 p.m. starting time and the program listing as a new row in the schedule table:
    <tr>
    <th>8:30 PM</th>
    <td>The Inner Mind</td>
</tr>
  3. The only program that starts at 9:00 p.m. is the hour-long Open Mike Nite program. Add the following row to the table to display this program in the schedule:
    <tr>
    <th>9:00 PM</th>
    <td rowspan=”2”>Open Mike Nite</td>
</tr>
  4. There are no programs that start at 9:30 p.m. during the week. However, you still need to include this starting time in the schedule because the nightly schedule is broken down into half-hour increments. Add the following table row:
    <tr>
    <th>9:30 PM</th>
</tr>
  5. Complete the table by adding the last row, which lists the World News Feed program that airs every night starting at 10:00 p.m.:
    <tr>
    <th>10:00 PM</th>
    <td colspan=”7”>World News Feed</td>
</tr>
  6. Save your changes to the file and then reload the dlr_evenings.html file in your browser.
Figure 6-18 highlights the newly added rows in the schedule table.
Figure 6-19 shows the complete schedule for all of the DLR evening programs during the week.
 

Quick Quiz:

  1. Fill in the blank: In HTML, the rowspan and colspan attributes can be used with the _____ and _____ elements of HTML respectively.
    (Answer: td and th)
  2. True/False: Spanning cells can only be created by adding either the rowspan or colspan attributes to the td element.
    (Answer: False)
 

Creating a Table Caption

To add a table caption:
  1. Return to the dlr_evenings.html file in your editor.
  2. Directly after the opening <table> tag, insert the following caption element:
    <caption>All Times Central</caption>
  3. Save your changes to the file.
Figure 6-20 highlights the table caption element.
 
To format the table caption:
  1. Return to the dlr_tables.css file in your editor.
  2. Go to the Table Caption Styles section and insert the following style rule:
    table.schedule caption {
    caption-side: bottom;
    text-align: right;
}
  3. Save your changes to the file and then reload the dlr_evenings.html file in your browser.
Figure 6-21 highlights the style rule for the table caption.
Figure 6-22 shows the placement of the table caption below and to the right of the schedule table.
 

Research activity:

Research the default values of properties associated with the caption element.

 
Session 6.1 Quick Check
  1. How is the number of columns in a web table determined?
    By the maximum number of table cells placed within the table rows.
  2. Provide code to create a table row with three header cells containing the text: Morning, Afternoon, and Evening.
    <tr>
    <th>Morning</th>
    <th>Afternoon</th>
    <th>Evening</th>
</tr>
  3. Provide code to create a table row with three data cells containing the text Tompkins, Ramirez, and Davis.
    <tr>
    <td>Tompkins</td>
    <td>Ramirez</td>
    <td>Davis</td>
</tr>
  4. Provide a style rule to display all table elements with collapsed borders.
    table {
    border-collapse: collapse;
}
  5. Two table cells have adjacent borders. One cell has a 5-pixel-wide double border and the other cell has a 6-pixel-wide solid border. If the table borders are collapsed, what type of border will the two cells share?
    The border will be a 6-pixel solid border because it is the border with the larger width.
  6. A table data cell contains the text Monday and should stretch across two rows and three columns. Provide the HTML code for the cell. 
    <td rowspan=”2” colspan=”3”>Monday</td>
  7. What adjustment do you have to make to a table when a cell spans multiple columns to keep the column aligned?
    You need to reduce the number of cells following the spanning cell.
  8. What adjustment do you have to make to a table when a cell spans multiple rows to keep the columns aligned?
    You need to reduce the number of cells in the rows following the spanning cell.
  9. Provide the style rule to display all table captions at the lower-left corner of the table.
    Rows and Column Groups
    caption {
    caption-side: bottom;
    text-align: left;
}
«Previous Lesson | Next Lesson »