HTML(3) 高雄大學資工系 嚴力行 HTML Tables Purposes of using tables The obvious purpose of arranging information in a table The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables 1
The Table Elements Eachtable tag pair<table></table> can hold any number of table rows Eachtablerow tag pair<tr></tr> can hold any number of table data items Eachtable head tag pair<th></th> has a different appearance than table data Eachtable data tag pair<td></td> can hold text, images, and other HTML elements Typical Table Sketch Code <table> <caption>sample Table</caption> <tr> <th>headrowcol1</th> <th>headrowcoln</th> </tr> <tr> <td>row1- col1</td> 2
Table Cells A table cell is another name for a table data<td> element A browser displays a cell only if it contains something Enter a nonvisible character to display the cell ( ) <tr> <td>rowm-col1</td> <td> </td> <td></td> <td>rowm-coln</td> </tr> 第三個 row 的 html 碼 沒有任何內容! 沒有 cell Attributes of Table Cells Tables cells can be distinguished by background colors -bgcolor Patterns -background alignment align, valign type fonts etc Example: tablecell.html 文字的垂直對齊 3
<td height="225"> <p align="center"><img border="0" src="lhyen.jpg" width="182" height="225"></p> 圖片當作格子的前景 </td> 文字向下對齊圖片當作格 <td background="te02.jpg" align=center valign="bottom"> 子的背景 <font face="arial" size="6"><b>cell with a background pattern</b></font> </td> table Tag Attributes align values: left, center, right default: left A better method is to embed the table in a <div> bgcolor, background border values: n (an integer) default: 0 width value: n(an integer), or n% 4
table Tag Attributes(cont d) cellpadding margin between cell content and cell border default: 2 cellspacing space between adjacent cells default: 2 A Note You can center HTML elements on a Web page by embedding them inside a single-celled table with attributealign set to center Aborder= 5 table attribute creates a 3-D picture frame for a single-celled table containing an image Example: a center framed image singlecell-imge.html 5
colspan androwspan colspan androwspan are table data attributes that are used to create irregular tables A table cell can be extended horizontally with thecolspan attribute A table cell can be extended vertically with therowspan attribute Example: composite example (with both rowspan and colspan) <TR> <TD Colspan="2" ALIGN="CENTER"> <IMG SRC="face.jpg" WIDTH="527" HEIGHT="222"> </TD> </TR> Show face 6
<TR> <TD ROWSPAN="2" ALIGN="CENTER"><IMG SRC="sila3.jpg" WIDTH="247" HEIGHT="602"></TD> <TD ALIGN="CENTER"><IMG SRC="face.jpg" WIDTH="312" HEIGHT="222"> </TD> <TD ROWSPAN="2" ALIGN="CENTER"><IMG SRC="sila1thin.jpg" WIDTH="222" HEIGHT="608"> </TD> </TR> silia3 Show face silia2 sila1thin <TR> <TD ALIGN="CENTER"><IMG SRC="sila2.jpg" WIDTH="267" HEIGHT="334"> </TD> </TR> Rule 1 for Table Elements rowspan= 2 colspan=2 我們可以在整齊的方格上劃箭頭表示 rowspan 與 colspan 所佔用的格子 Row 中 TD 個數的算法 先算沒有被箭頭劃過的 cell 數 再加上屬於箭頭起點的 cell 數 上圖第一個 row 有幾個 TD? 2 個上圖第二個 row 有幾個 TD? 2 個 7
Rule 2 for Table Elements 任何位於向下箭頭起點的 cell, 其 TD 標籤中應有 rowspan, 其值為向下箭頭所劃過的 cell 數 第一個 row 的第一個 cell 值為 2 上圖第幾個 row 的第幾個 cell 該設 rowspan? 值為多少? Rule 3 for Table Elements 任何位於向右箭頭起點的 cell, 其 TD 標籤中應有 colspan, 其值為向右箭頭所劃過的 cell 數 上圖第幾個 row 的第幾個 cell 該設 colspan? 值為多少? 第一個 row 的第二個 cell 值為 2 8
Practice: colspan 與 rowspan 下圖中每個 row 中各有多少 cell? 那些 cell 該設 rowspan? 值為多少? Row 1 Row 2 Table 應用 : 使文字從背景中突顯 Text is hard to read against a busy background pattern you can lay a table containing text on top of a background pattern without sacrificing readability just give the table a solid background color Examples: table_text2.html vs. table_text1.html 9
Table 應用 : 將文字分成兩欄 Tables can also be used to separate text into two columns acellpadding= 20 table attribute will put white space between the two columns Example: table_2col.html Tables and Graphics Tables can be used to control a Web page layout for multiple images (or images mixed with text) Images of different sizes can be fit together in irregularly-shaped tables using cell-structure diagrams All tables have an underlying cell structure with a uniform number of table cells across each table row 10
Web Page Borders Empty table columns can be used to create margins for text on a Web page Use a fixed width attribute (e.g.width= 50 ) for the empty table data element Put an internal table inside Example: innertable.html Note: better to control margins with CSS <center> <table border=1 width=70%> </center> 11
One vs. Many If you have one very large table, try to break it up into a sequence of smaller tables that can be stacked vertically on a Web page Browsers download the contents of an entire table before any of the table can be viewed Multiple tables will be displayed incrementally so the user will be able to see the first part of your page while the rest of the page is still downloading Disadvantages of tables for layout Complex layout requires complex tables (lots of headaches, room for error) Complex tables can download, be rendered slowly Scalability issues Not all browsers can read tables 12