INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
-
Upload
cameron-blankenship -
Category
Documents
-
view
216 -
download
1
Transcript of INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
![Page 1: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/1.jpg)
INTRODUCTION TO WEB DEVELOPMENT AND HTML
Lecture 06: Tables - Spring 2011
![Page 2: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/2.jpg)
Outline Introducing Tables Basic Table Elements and Attributes Advance Tables Accessibility Issues with Tables Exercise
![Page 3: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/3.jpg)
Introducing Tables
![Page 4: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/4.jpg)
Introducing Tables
Think of grids, or spreadsheets in a web page.
They consist of rows and columns.
The interception of a row and a column is called a
“cell”
Row: set of cells in the same line from left to right
Column: line of cells going from top to bottom
The XHTML element is:
<table>
![Page 5: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/5.jpg)
The <table> element A table is written out row by row. A row is contained inside a <tr> element <tr>: table row Each cell is written inside the row element
using a <td> element. <td>: table data
![Page 6: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/6.jpg)
The <table> element A table is written out row by row. A row is contained inside a <tr> element <tr>: table row Each cell is written inside the row element
using a <td> element. <td>: table data
![Page 7: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/7.jpg)
The <table> element (cont’d)<table border=“1”> <tr> <td> column 1, row 1</td>
<td> column 2, row 1</td>…
</tr><tr>
<td> column 1, row 2</td><td> column 2, row 2</td>…
</tr>….</table>
Indicates the start of a rowTable data (cell)
Indicates the end of a row
Indicates the start of a table
![Page 8: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/8.jpg)
A slightly more complex example
Go to: ..\web-dev.localhost\table-slightly-complex.html
![Page 9: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/9.jpg)
Basic Table Elements and Attributes
![Page 10: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/10.jpg)
The <table> element attributes <table>: contains
All of the universal attributes Basic event attributes for scripting
Deprecated attributes: align: indicates where the table should be align (left,
center, right). Text flows around the table when uses align. bgcolor: sets the background color for the table border: it will create a border around the table and each
cell cellpadding: create a space between cell and its content. cellspacing: create space between borders of each cell width: specify the width of the table in pixels, or as a
percentage
![Page 11: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/11.jpg)
The <tr> element attributes <tr>: contains
align: specifies the position of the content of all the cells in the row (left, center, right, justify).
bgcolor: sets the background color of the row valign: specified the vertical alignment of the
contents of each cell in the row. (top, middle, bottom, baseline)
*All of these attributes have been deprecated in favor of CSS
![Page 12: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/12.jpg)
The <td> and <th> attributes Every cell is represented by either:
<td>: cells containing table data <th>: cells containing table headings
By default: <td>: bold font, horizontally aligned in the center
of the cell <td>: left-aligned, not in bold.
Any styles that these attributes have will override settings for the table and for row elements.
![Page 13: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/13.jpg)
The <td> and <th> attributes align(*): sets the horizontal alignment for the
content of the cell (left, right, center, justify) bgcolor (*): sets the background color for the
cell. colspan: specify how many columns of the
table a cell will span across. rowspan: specifies the number of rows of the
table a cell will span across. height(*): specifies the height of a cell width(*): specified the width of a cell valign(*): specifies vertical alignment (top,
middle, bottom)
![Page 14: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/14.jpg)
Advance Tables
![Page 15: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/15.jpg)
Advance Tables Splitting table into three sections
head body foot
Captioning tables Using rowspan and colspan Grouping columns using <colgroup> Sharing attributes between unrelated columns
using <col> element
![Page 16: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/16.jpg)
Splitting up Tables Can be divided into three parts: head, body
and foot <thead>: to create a separate table header <tbody>: to indicate the main bod <tfoot>: to create a separate table footer
<tfoot> must appear before <tbody>
![Page 17: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/17.jpg)
Example using <thead>, <tbody>, <tfoot>1. <table>
2. <thead>
3. <tr>
4. <td colspan="4">This is the head of the table</td>
5. </tr>
6. </thead>
7. <tfoot>
8. <tr>
9. <td colspan="4">This is the foot of the table</td>
10. </tr>
11. </tfoot>
12. <tbody>
13. <tr>
14. <td>Cell 1</td>
15. <td>Cell 2</td>
16. <td>Cell 3</td>
17. <td>Cell 4</td>
18. </tr>
19. </tbody>
20. </table>
![Page 18: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/18.jpg)
<table>: The <caption> element Indicates the caption of the table. The caption
must be between the <caption> tags, and immediately after <table> and before the first row.
<table border="1">
<caption>This is a table caption</caption>
…
…
![Page 19: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/19.jpg)
Spanning columns: the colspan attribute
![Page 20: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/20.jpg)
Spanning rows: the rowspan attribute
![Page 21: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/21.jpg)
Grouping columns: The <colgroup> element It groups one or more adjacent columns into a
group. It uses the <colgroup> element to create
groups This allows to format different group of
columns rather than formatting each column at a time.
![Page 22: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/22.jpg)
Example of grouping columns1. <table>2. <colgroup span=“8”
class=“mainColumns” />3. <colgroup span=“2”
class=”subTotalColumns” />4. <colgroup span=“3”
class=”totalColumns” />5. <tr>6. <td>…<td>7. …
![Page 23: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/23.jpg)
Questions? Before the exercise
![Page 24: INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649dac5503460f94a9c423/html5/thumbnails/24.jpg)
Exercises Do exercise on course website Create an image with hotspots