1 / 13

HTML Tutorial 5: Working with Tables

CIS 1315. HTML Tutorial 5: Working with Tables. <table>. <table>…</table> Structure to Control Page Layout Structure to Contain & Align Content Attributes border=“#” Sets Thickness of Borders Displayed for Table Cells Attribute Set to 0 Will Make Borders “Invisible”. <table>.

amalie
Download Presentation

HTML Tutorial 5: Working with 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. CIS 1315 HTMLTutorial 5: Working with Tables

  2. <table> • <table>…</table> • Structure to Control Page Layout • Structure to Contain & Align Content • Attributes • border=“#” • Sets Thickness of Borders Displayed for Table Cells • Attribute Set to 0 Will Make Borders “Invisible”

  3. <table> • Attributes • cellpadding=“#” • Specifies Amount of Space Between Cell & Content in Cell • cellspacing=“#” • Specifies Amount of Space Between Cells • frame=“above | below | border | box | hsides | lhs | rhs | void | vsides” • Specifies Where Borders of Tables & Cells Appear

  4. <table> • Attributes • height=“# | %” • Specifies Height of Table in Pixels or Percentage of Window • rules=“all | cols | groups | none | rows” • Specifies Where Gridlines Appear in a Table • valign=“top | bottom | middle ” • Specifies Vertical Alignment of Text in Cells • width=“# | %” • Specifies Width of Table in Pixels or Percentage of Window

  5. <table> • frame

  6. <table> • rules

  7. <colgroup> • <colgroup>…</colgroup> • Defines Groups of Table Columns for Formatting • Only Valid Inside <table> • Attributes • align=“left | center | right | justify | char” • Specifies Horizontal Alignment of Contents in Column Group • char=“character” • Specifies Character to Use to Align Text On

  8. <colgroup> • Attributes • span=“#” • Specifies Number of Columns <colgroup> Should Span • valign=“top | middle | bottom | baseline” • Specifies Vertical Alignment of Contents in <colgroup> • width=“# | %” • Specifies Width of Each Column in <colgroup> • 0* - Column Width Should be Minimum Width

  9. <col> • <col /> • Defines One or More Columns of Table for Formatting • Only Valid Inside <table> or <colgroup> • Attributes • align=“left | center | right | justify | char” • Specifies Horizontal Alignment of Contents in Table Column • char=“character” • Specifies Character to Use to Align Text On

  10. <col> • Attributes • span=“#” • Specifies Number of Columns the Column Should Span • valign=“top | middle | bottom | baseline” • Specifies Vertical Alignment of Contents in Table Column • width=“# | %” • Specifies Width of Column • 0* - Column Width Should be Minimum Width

  11. <tr> & <td> • <tr>…</tr> • Defines a Row in a Table • <td>…</td> • Defines Table Data (a Cell) in a Row • Table Data Cells Must Only Appear Within Table Rows • Closing Tag Must Appear on Same Line as Content • Otherwise Gapping May Occur

  12. <td> • Attributes • colspan=“#” • Specifies How Many Columns the Cell Overlaps • rowspan=“#” • Specifies How Many Rows the Cell Overlaps

  13. <th> & <caption> • <th>…</th> • Specifies the Table Header for a Row • Identical to Table Data Cells Except: • Cells Contents are Bolded • Cells Contents are Centered • <caption>…</caption> • Attaches a Caption to a Table

More Related