Download CIS 1315 – Web Development for Educators

CIS 1315
HTML
Tutorial 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=“#”


cellspacing=“#”


Specifies Amount of Space Between Cell & Content in Cell
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=“# | %”


rules=“all | cols | groups | none | rows”


Specifies Where Gridlines Appear in a Table
valign=“top | bottom | middle ”


Specifies Height of Table in Pixels or Percentage of Window
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=“#”


valign=“top | middle | bottom | baseline”


Specifies Number of Columns <colgroup> Should Span
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=“#”


valign=“top | middle | bottom | baseline”


Specifies Number of Columns the Column Should Span
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
CIS 1315 – Web Development for Educators