cis 1310 – html & css 8 tables. cis 1310 – html & css learning outcomes create a table ...
TRANSCRIPT
CIS 1310 – HTML & CSS
8
Tables
CIS 1310 – HTML & CSS
Learning OutcomesLearning Outcomes
Create a Table
Apply Attributes to Format Tables
Increase the Accessibility of a Table
Style a Table with CSS
CIS 1310 – HTML & CSS
<pre><pre>
<pre>…</pre>
Preformatted Text
Presents Blocks of Text in Fixed-width Font
Renders Multiple Spaces
CIS 1310 – HTML & CSS
TablesTables
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
CIS 1310 – HTML & CSS
<table><table>
<table>…</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”
CIS 1310 – HTML & CSS
<caption><caption>
<caption>…</caption>
Attaches a Caption to a Table
Use text-align to Align the Caption
Use caption-side to Place the Caption
CIS 1310 – HTML & CSS
<colgroup><colgroup>
<colgroup>…</colgroup>
Defines Groups of Table Columns for Formatting
Only Valid Inside <table>
Attributes
span=“#”
Specifies Number of Columns <colgroup> Should Span
CIS 1310 – HTML & CSS
<col><col>
<col />
Defines One or More Columns of Table for Formatting
Only Valid Inside <table> or <colgroup>
Attributes
span=“#”
Specifies Number of Columns the Column Should Span
CIS 1310 – HTML & CSS
<tr> & <td><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
CIS 1310 – HTML & CSS
<td><td>
Attributes
colspan=“#”
Specifies How Many Columns the Cell Overlaps
rowspan=“#”
Specifies How Many Rows the Cell Overlaps
CIS 1310 – HTML & CSS
<th><th>
<th>…</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
CIS 1310 – HTML & CSS
<th><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
CIS 1310 – HTML & CSS
Table Row GroupsTable Row Groups
<thead>…</thead>
Designate Heading Section of a Table
<tbody>…</tbody>
Designate Body Section of a Table
<tfoot>…</tfoot>
Designate Footer Section of a Table
CIS 1310 – HTML & CSS
Nesting TablesNesting Tables
Nested Tables Must Reside in <td><table>
<tr>
<td>Some text</td>
<td>
<table>
<tr>
<td>Table in a table</td>
</tr>
</table>
</td>
</tr>
</table>
CIS 1310 – HTML & CSS
CSS & TablesCSS & Tables
Cell Visual Control
padding
Specify Amount of Space Within Cell
border-spacing or border-collapse
Specify Amount of Space Between Cells
CIS 1310 – HTML & CSS
CSS & TablesCSS & 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
CIS 1310 – HTML & CSS
CSS & TablesCSS & 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; }