ITSE 1411 Beginning Web
Tables Basics Discussion Chapter 9
Discussion
  1. Tables
    • Tables are used to organize a page. Tables are used today similar to a spreadsheet. Before CSS, tables were used for design layout. This is no longer recommended.
    • A table can consist of a single table data cell, a row, a column, or a grid of rows and columns.
    • Click on tableExample.htm
    • View the source.
    • Save in your module2 folder.
    • Open tableExample.htm in LTS.
    • Resize this page on the left of your screen.
    • Resize the tableExample.htm page on the right of your screen.
    • Explanation of the table on the tableExample.htm page
      • The table tag designates that there will be a table. Unlike formatting other text in XHTML strict, table formatting can use HTML properties inside the table tags.
      • Optional attributes of the table
        • Tables can be sized in html in either pixels or percentages. If no measurement is shown, then the default is pixels. To designate sizes in other measurements, such as points, em, cm, etc., you must use CSS.
        • Unless specified, a table border will not show in a table. See W3Schools table border example.
        • The summary attribute provides for accessibility to give an overview of the context of the table.
        • The title attribute provides a brief description to give an overview of the table.
        • Cellpadding is the space between the contents of the cell and the cell wall. The default for cellpadding is 1 px. (Think of being locked in a padded cell.) This is obsolete in HTML5.
        • Cellspacing controls the space between table cells. When no cellspacing is designated, the default is usually 2. This is obsolete in HTML5.
        • Colgroup tag is used to group columns in a table for formatting. The order that you place the colgroup is the order of the columns of the table from left to right. The colgroup formatting will not show up in Firefox.
        • The width attribute designates the width of the element. (This is obsolete in HTML5.)
        • The align attribute defines the horizontal alignment. (This is obsolete in HTML5)
        • The span attribute can apply the colgroup to more than one column.
        • In tableExample.htm the first column is used for labels and is formatted differently than the next four columns.
      • Table Rows, Cells, and Headers
        • A table is divided into rows (with the <tr> tag)
        • Each row is divided into data cells with the <td> tag (table data) or <th> tag (table heading).
        • A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
        • Unless specified, a table will be the width that the browsers decide it will be according to the cell contents.
        • A table header element, written <th> is like a table data item <td> except it centers and bolds the contents.
      • Span Rows and Columns
        • The colspan attribute is used to allow a cell to use more than one column.
        • The rowspan attribute is used to allow a cell to use more than one row.
      • Configure an Accessible Table
        • Be sure to use a detailed summary for screen readers to read to the user. The example in the text breaks the string in the summary. This will not work. You need to close the string, concatenate, and open the string on each line. For example
              summary="A list of bird sightings with one bird"
              + "listed in each row.  The first column contains the name of the bird."
              + "The second column contains the date the bird was identified."
        • The caption element will provide a text caption for the table. Some browsers put the caption at the top of the table. Some browsers put the caption at the bottom of the table.
      • Style a Table with CSS
        • Check out Table 9.2, page 274 that compares the HTML attributes to the coinciding CSS Properties.
      • CSS3 Structural Pseudo-classes
        • CSS3 has what is called the structural pseudo-class selector to allow you to apply formatting according to placement within an element. Be aware that users with older browsers will not be able to render this formatting.
      • Configure Table Sections
        • Tables can be grouped into three types, table head, written <thead>, table body, written <tbody>, and table footer, written <tfoot>.
        • Please note that if you choose to use the table footer, you actually code it before the table body to pass W3C validation for XHTML. In HTML5, the table footer goes more logically below the table body.