1 / 11

Lesson 6: HTML Tables

Lesson 6: HTML Tables. Lesson 6 Objectives. Describe HTML table tags and attributes Use table and data alignment options Change the height and width of table elements Specify column and row spanning Format content in tables. Introduction to HTML Tables.

leona
Télécharger la présentation

Lesson 6: HTML Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lesson 6:HTML Tables

  2. Lesson 6 Objectives • Describe HTML table tags and attributes • Use table and data alignment options • Change the height and width of table elements • Specify column and row spanning • Format content in tables

  3. Introduction to HTML Tables • Present data that lends itself to tabular format • In XHTML, do not use to structure entire pages • Offers many formatting options

  4. Element Tag Description Table <table>…</table> Required to create a table; contains all other table elements. Table caption <caption>…</caption> Optional; adds a caption or title, which appear above the table by default. Table row <tr>…</tr> Required; contains all data for a table row. Table header <th>…</th> Optional; typically designates the top row or left column. By default, text in a header cell will appear bold and centered. Table data <td>…</td> Required, unless <th> is being used; designates table cell contents. Table Element Tags

  5. The <table> Tag • Table tag creates the table structure • <table> </table> encloses all other table elements • Attributes include: • align • border • cellpadding • cellspacing • width • summary

  6. The <tr> Tag • Table row tag creates a row within a table • Attributes include: • align • valign • bgcolor • style

  7. The <td> Tag • Table data tag designates table cell contents • Attributes include: • align • valign • colspan • rowspan • bgcolor • height • width

  8. Differences between HTML and XHTML Tables • The align and bgcolor attributes for the <table> tag are deprecated in HTML 4.01 • Both attributes for the <table> tag can be used in XHTML 1.0 Transitional, but not in XHTML 1.0 Strict

  9. Table and Data Alignment Options • Defaults for table data: • Content in table header cells is aligned both horizontally and vertically to the center of the cell • Content in table data cells is aligned horizontally to the left and vertically to the center • You can customize these defaults by using: valign="top" This will make text appear in the top of a cell or row

  10. Working with Table Data • Changing height and width of table elements • Configuring table cells to span multiple columns or rows • Formatting content in tables

  11. Lesson 6 Summary • Describe HTML table tags and attributes • Use table and data alignment options • Change the height and width of table elements • Specify column and row spanning • Format content in tables

More Related