CIS 1315 – Web Development for Educators

CIS 1315

HTMLTutorial 5: Working with Tables

CIS 1315 – Web Development for Educators

<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”

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<table>

frame

CIS 1315 – Web Development for Educators

<table>

rules

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<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

CIS 1315 – Web Development for Educators

<td>

Attributes

colspan=“#”

Specifies How Many Columns the Cell Overlaps

rowspan=“#”

Specifies How Many Rows the Cell Overlaps

CIS 1315 – Web Development for Educators

<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