Tables creating a table within a web page

What makes up a table? Columns Rows

Tag Elements you need to know…... – Tabular content (rows and columns)... – Table row... – Table header... – Table cell data

Tag Elements you need to know… cellpadding – cell padding is the amount of space held between the contents of the cell and the cell border. example: cellspacing - Cell spacing is the amount of space held between cells, specified by the number of pixels. If you don’t specify anything, the browser will use the default value of 2 pixels between cells. example:

Tag Elements you need to know… caption – used to give a table a title or brief description. The caption element must be the first thing within the table element. summary - the summary provide a more lengthy description of the table and its contents. The summary element is in the table element. The summary is not rendered in visual browsers, but may be used by screen readers or other assistive devices to give visually impaired users a better understanding.

pg 153 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Practice Create a basic html document. Within the body element, practice making a table. Table Elements

Check it in your browser. Does it look like this?

Row group elements You can describe rows or groups of rows as belonging to a header, footer, or the body of a table using the thead, tfoot, and tbody elements, respectively. Some user agents (another word for a browsing device) may repeat the header and footer rows on tables that span multiple pages. Authors may also use these elements to apply styles to various regions of a table. Column group elements Columns may be identified with the col element or put into groups using the colgroup element. This is useful for adding semantic context to information in columns and may be used to calculate the width of tables more quickly. Notice that there is no content in the column elements; it just describes the columns before the actual table data begins. Accessibility features Accessibility features such as captions for providing descriptions of table content and the scope and headers attributes for explicitly connecting headers with their respective content are discussed later in this chapter. pg 155 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Practice II Write the html text to create this table. pg 157 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Making a Row span two Columns Column spans, created with the colspan attribute in the td or th element, stretch a cell to the right to span over the subsequent columns (Figure 8-6 ). Here a column span is used to make a header apply to two columns. (I’ve added a border around cells to reveal the table structure in the screenshot.) pg 158 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Practice III Write the html text to create this table with a column span. pg 158 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Making a Column span multiple Rows Row spans, created with the rowspan attribute, work just like column spans, but they cause the cell to span downward over several rows. In this example, the first cell in the table spans down three rows pg 159 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Practice IV Write the html text to create this table with a row span. pg 159 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Challenge Write the html text to create this table. pg 163 Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

Add a border to your table with CSS. (you can change the size (pixel) and color. td, th { border: 1px solid #CCC} table { border: 1px solid black}