Top Banner
Tables creating a table within a web page
16

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

Jan 20, 2018

Download

Documents

Eustace Gilmore

Tag Elements you need to know…... – Tabular content (rows and columns)... – Table row... – Table header... – Table cell data
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Tables creating a table within a web page. What makes up a table? Columns Rows.

Tables creating a table within a web page

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

What makes up a table?Columns

Rows

Page 3: 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

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

Tag Elements you need to know…

• 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”>

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

Tag Elements you need to know…

• 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.

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

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

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

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

table.

Table Elements

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

Check it in your

browser. Does it lo

ok

like this?

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

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

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

Practice II • Write the html text to create this table.

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

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

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.)

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

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

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

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

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

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

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

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

Challenge• Write the html text to create this table.

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

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

• 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>