HTML5 1.5 表格元素


1、表格構成的三個基本要素 table:表格的外框、范圍,用來定義表格;tr:表格的行;td:表格的單元格

2、th元素:為表格添加單元格,是tr的子元素

3、colspan:橫向合並單元格,語法為<td><colspan>="3"</td>

4、rowspan:豎向合並單元格,語法為<td><rowspan>="3"</td>

5、caption元素:給表格添加標題,是table的子元素,caption的align屬性可以設置標題位置。不過一般用css設置標題位置

6、thead\tfoot\tbody元素:表頭、頁腳、主體。一般結合css、java來使用

7、colgroup元素

     用來組合列,她的span屬性可以設置組合列的數目;它可以包含一個子元素 col.

     為table的子元素,必須放在caption元素之后,thead元素之前

8、col元素

     col可以用來設定列的屬性;它可以使用span屬性

     col一般作為colgroup元素的子元素配合使用

<!DOCTYPE html>

< html lang="zh-cn">

<head>

          <meta charset="UTF-8">

          <title>例5</title>

</head>

<body bgcolor=”#fedcbd“>

<table border=“2”  align=“center”  style=“font-size:18px;”>

         <colgroup span=”4“>

                      <col span=“1” style=“width:150px;background=blue”>

                      <col span=“2” style=“width:200px;background=red”>

                       <col span=“1” style=“width:150px;background=green”>

         </colgroup>

         <caption style="font-size:30px;color:yellow">特殊符號的使用</caption>

         <thead>

                      <tr style="height:50px;background=yellow;"> <th>符號</th><th>實體名稱</th><th>實體數量</th><th>描述</th></tr>

         </thead>

         <tbody>

                      <tr align="center"> <td></td><td>&ampnbsp</td><td>&amp#160</td><td>空格</td></tr>

                      <tr align="center"> <td><</td><td>&lt</td><td>&amplt#60</td><td>小於</td></tr>        

                      <tr align="center"> <td>></td><td>&gt</td><td>&ampgt#62</td><td>大於</td></tr> 

                      <tr align="center"> <td>&</td><td>&ampamp</td><td>&amp#38</td><td>連接符號</td></tr>

                      <tr align="center"> <td>“</td><td>&quot</td><td>&amp#34</td><td>雙引號</td></tr>

                      <tr align="center"> <td>±</td><td>&plusmn</td><td>&amp#177</td><td>正負值</td></tr>        

                      <tr align="center"> <td>©</td><td>&copy</td><td>&amp#169</td><td>著作權</td></tr> 

                      <tr align="center"> <td>℗</td><td>&reg</td><td>&amp#174</td><td>商標</td></tr>

        </tbody>

         <tfoot>

                      <tr > <td colspan=”4“ style=”height:40px;background:yellow“>其他的用到時查詢即可知</td></tr>

         </tfoot>

</table>

</body>

</html>


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com