Download CIS 1310 – HTML & CSS

8
Tables
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
CIS 1310 – HTML & CSS
<pre>

<pre>…</pre>

Preformatted Text

Presents Blocks of Text in Fixed-width Font

Renders Multiple Spaces
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
CIS 1310 – HTML & CSS
<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>

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>

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 />

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>…</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>

Attributes

colspan=“#”


Specifies How Many Columns the Cell Overlaps
rowspan=“#”

Specifies How Many Rows the Cell Overlaps
CIS 1310 – HTML & CSS
<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>

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 Groups

<thead>…</thead>


<tbody>…</tbody>


Designate Heading Section of a Table
Designate Body Section of a Table
<tfoot>…</tfoot>

Designate Footer Section of a Table
CIS 1310 – HTML & CSS
Nesting 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 & 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 & Tables

Cell Visual Control

:first-of-type


:first-child


Applies to the first element of the specified type
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 & 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; }
CIS 1310 – HTML & CSS