1. CIS 1310 – HTML & CSS 8 Tables

2. CIS 1310 – HTML & CSS Learning Outcomes  Create a Table  Apply Attributes to Format Tables  Increase the Accessibility of a Table  Style a Table with CSS

3. CIS 1310 – HTML & CSS <pre>  … Preformatted Text Presents Blocks of Text in Fixed-width Font Renders Multiple Spaces

4. CIS 1310 – HTML & CSS Tables  Used on Web Pages to Organize Tabular Information  Composed of Rows & Columns Similar to a Spreadsheet  Table Cell is Intersection of a Specific Row & Column  Configured with table, tr, & td Elements

5. CIS 1310 – HTML & CSS <table>  … Structure to Contain & Align Content  Attributes border=“” or “1” Sets Thickness of Borders Displayed for Table Cells Attribute Set to “” Will Make Borders “Invisible”

6. CIS 1310 – HTML & CSS <caption>  … Attaches a Caption to a Table Use text-align to Align the Caption Use caption-side to Place the Caption

7. CIS 1310 – HTML & CSS <colgroup>  … Defines Groups of Table Columns for Formatting Only Valid Inside  Attributes span=“#” Specifies Number of Columns Should Span

8. CIS 1310 – HTML & CSS <col>  Defines One or More Columns of Table for Formatting Only Valid Inside or  Attributes span=“#” Specifies Number of Columns the Column Should Span

9. CIS 1310 – HTML & CSS & &  … Defines a Row in a Table  … Defines Table Data (a Cell) in a Row Table Data Cells Must Only Appear Within Table Rows

10. CIS 1310 – HTML & CSS <td>  Attributes colspan=“#” Specifies How Many Columns the Cell Overlaps rowspan=“#” Specifies How Many Rows the Cell Overlaps

11. CIS 1310 – HTML & CSS <th>  … Specifies the Table Header for a Row Identical to Table Data Cells Except: Cells Contents are Bolded & Centered  Attributes colspan=“#” Specifies Number of Columns a Header Cell Overlaps rowspan=“#” Specifies Number of Rows a Header Cell Overlaps

12. CIS 1310 – HTML & CSS <th>  Attributes headers=“header_id” Specifies One or More Header Cells a Cell is Related to scope=“col | colgroup | row | rowgroup” Specifies Whether Header Cell is a Header for a: Column, Row, or Group of Columns or Rows

13. CIS 1310 – HTML & CSS Table Row Groups  … Designate Heading Section of a Table  … Designate Body Section of a Table  … Designate Footer Section of a Table

14. CIS 1310 – HTML & CSS Nesting Tables  Nested Tables Must Reside in Some text Table in a table

15. CIS 1310 – HTML & CSS CSS & Tables  Cell Visual Control padding Specify Amount of Space Within Cell border-spacing or border-collapse Specify Amount of Space Between Cells

16. CIS 1310 – HTML & CSS CSS & Tables  Cell Visual Control :first-of-type Applies to the first element of the specified type :first-child Applies to the first child of an element (CSS2 selector) :last-of-type Applies to the last element of the specified type

17. CIS 1310 – HTML & CSS CSS & Tables  Cell Visual Control :last-child Applies to the last child of an element :nth-of-type(n) Applies to the “nth” Element of the Specified Type Values: Number, Odd, or Even Zebra Stripe a Table tr:nth-of-type(even) { background-color: #eaeaea; }