Tables creating a table within a web page. What makes up a table? Columns Rows.

Tables creating a table within a web page

What makes up a table?Columns

Rows

Tag Elements you need to know…

• <table>...</table>– Tabular content (rows and columns)

• <tr>...</tr>– Table row

• <th>...</th>– Table header

• <td>...</td>– Table cell data


• cellpadding – <cellpadding =“ “> cell padding is the amount of space held between the contents of the cell and the cell border. example: <table cellpadding=“15”>

• cellspacing - <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: <table cellpadding=“15” cell spacing=“15”>


• caption – <caption> used to give a table a title or brief description. The caption element must be the first thing within the table element.

• summary - <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 153Learning Web Design, Fourth Edition by Jennifer Niederst Robbins Copyright © 2012

PracticeCreate a basic html document. Within the body element, practice making a

table.

Table Elements

Check it in your

browser. Does it lo

ok

like this?

Row group elementsYou 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 elementsColumns 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 featuresAccessibility 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’veadded a border around cells to reveal the table structure in the screenshot.)


Practice III • Write the html text to create this table with a

column span.


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


Practice IV • Write the html text to create this table with a

row span.


Challenge• Write the html text to create this table.


• Add a border to your table with CSS. (you can change the size (pixel) and color.

<style type=“text/css”>td, th { border: 1px solid #CCC}table { border: 1px solid black}</style>

Tables creating a table within a web page. What makes up a table? Columns Rows.

Documents