CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.
-
Upload
frederica-elliott -
Category
Documents
-
view
219 -
download
0
Transcript of CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.
![Page 1: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/1.jpg)
CIS 1315 – Web Development for Educators
CIS 1315
HTMLTutorial 5: Working with Tables
![Page 2: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/2.jpg)
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”
![Page 3: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/3.jpg)
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
![Page 4: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/4.jpg)
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
![Page 5: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/5.jpg)
CIS 1315 – Web Development for Educators
<table>
frame
![Page 6: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/6.jpg)
CIS 1315 – Web Development for Educators
<table>
rules
![Page 7: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/7.jpg)
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
![Page 8: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/8.jpg)
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
![Page 9: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/9.jpg)
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
![Page 10: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/10.jpg)
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
![Page 11: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/11.jpg)
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
![Page 12: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/12.jpg)
CIS 1315 – Web Development for Educators
<td>
Attributes
colspan=“#”
Specifies How Many Columns the Cell Overlaps
rowspan=“#”
Specifies How Many Rows the Cell Overlaps
![Page 13: CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.](https://reader035.fdocuments.us/reader035/viewer/2022062421/56649dc75503460f94abb604/html5/thumbnails/13.jpg)
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