13
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables
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
