Using HTML Tables Presenting Information & Layout Control.
-
Upload
sierra-pointon -
Category
Documents
-
view
237 -
download
2
Transcript of Using HTML Tables Presenting Information & Layout Control.
![Page 1: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/1.jpg)
Using HTML Tables
Presenting Information & Layout Control
![Page 2: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/2.jpg)
Using HTML Tables
You can use the <table>…</table> container to display information in table format.
You can use the <table>…</table> container to control the layout of a page.
![Page 3: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/3.jpg)
Using Tables for Information
![Page 4: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/4.jpg)
Using Tables for Layout
![Page 5: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/5.jpg)
The <table>…</table> Container
Defines the beginning and end of a table Attributes
background bgcolor border cellspacing cellpadding width height
![Page 6: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/6.jpg)
The <tr>…</tr> Container
Defines a table row Structural tag only (no content) Attributes
align valign bgcolor
![Page 7: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/7.jpg)
The <td>…</td> Container
Defines a data cell in a table Can contain any content, including
another, nested table Attributes:
align valign height
background bgcolor height
width colspan rowspan
![Page 8: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/8.jpg)
<td colspan …> Example
<tr><td colspan=“2”
bgcolor=“blue”></td><td>…</td>
</tr>
![Page 9: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/9.jpg)
<td rowspan …> Example
<tr><td rowspan=“2”
bgcolor=“blue”></td><td>…</td>
</tr>
![Page 10: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/10.jpg)
<th>…</th> Container
Defines a header cell Acts just like a <td>…</td>
container, except … The text is normally centered
vertically and horizontally AND the text is bold
Attributes are the same as <td>…</td>
![Page 11: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/11.jpg)
<th>…</th> Example
<tr><th>
Table</th><th>…</th>
</tr>
![Page 12: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/12.jpg)
<caption>…</caption> Container
Provides a summary of the table’s purpose
MUST immediately follow <table> Attributes:
align summary valign (MSIE only)
![Page 13: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/13.jpg)
<caption>…</caption> Example
<caption align=“center”summary=“Long Description goes here”valign="bottom">
Figure 1: Hexadecimal Conversions</caption>
![Page 14: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/14.jpg)
Using Tables for Multipart Images
Use a basic table structure Set the border, cellpadding and
cellspacing attributes to “0” (zero) No spaces or page breaks between tags
included between <td> … </td>! Can be used for “Poor Man’s” Image
Maps Example:
http://www.cs.iupui.edu/~rmolnar/n241/lectures/tablesFiles/index.html
![Page 15: Using HTML Tables Presenting Information & Layout Control.](https://reader035.fdocuments.net/reader035/viewer/2022062511/5519b16c5503467a578b45f4/html5/thumbnails/15.jpg)
Questions?