有关表格的标签学习(一)

概述:


表格相关的标签有:table ,tr ,th ,td ,tbody ,thead ,tfoot ,col ,colgroup ,caption 。

 1.简单的一个例子(只使用table, tr, td标签 和table的border属性)。

 <table border="1">
  <tr><td>姓名</td><td>性别</td><td>年龄</td><td>专业</td></tr>
  <tr><td>陈超</td><td>男</td><td>18</td><td>商学院</td></tr>
  <tr><td>曾苇</td><td>女</td><td>19</td><td>教师教育学院</td></tr>
  <tr><td>张龄予</td><td>女</td><td>17</td><td>人文学院</td></tr>
  <tr><td>俞申琅</td><td>男</td><td>20</td><td>建筑与土木工程学院</td></tr>
 </table>
结果:
有关表格的标签学习(一)_第1张图片

2.另一个例子(增加th , caption 标签和table的若干属性)。

 <table border="1" cellspacing="0" cellpadding="10" frame="box" rules="rows" width="600">
 <caption>学生信息表</caption>
  <tr><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th></tr>
  <tr><td>陈超</td><td>男</td><td>18</td><td>商学院</td></tr>
  <tr><td>曾苇</td><td>女</td><td>19</td><td>教师教育学院</td></tr>
  <tr><td>张龄予</td><td>女</td><td>17</td><td>人文学院</td></tr>
  <tr><td>俞申琅</td><td>男</td><td>20</td><td>建筑与土木工程学院</td></tr>
 </table>
结果:

有关表格的标签学习(一)_第2张图片

 

 3.另一个例子(使用col标签及align属性)。

 <table border="1" cellspacing="0" cellpadding="10" frame="box" rules="all" width="600">
 <col align="center"/>  <col align="center"/> <col align="center"/> <col align="justify"/>
  <tr><th>姓名</th><th>性别</th> <th>年龄</th><th>专业</th></tr>
  <tr><td>陈超</td><td>男</td><td>18</td><td>商学院</td></tr>
  <tr><td>曾苇</td><td>女</td><td>19</td><td>教师教育学院</td></tr>
  <tr><td>张龄予</td><td>女</td><td>17</td><td>人文学院</td></tr>
  <tr><td>俞申琅</td><td>男</td><td>20</td><td>建筑与土木工程学院</td></tr>
 </table>

结果:

有关表格的标签学习(一)_第3张图片 

 

4.另一个例子(col和col的结合使用)。

 <table border="1" cellspacing="0" cellpadding="10" frame="box" rules="all" width="600">
  <colgroup align="center">
    <col style="background:#f2eada"/>
    <col span="2" style="background:#f47920" width="100"/>
    <col style="background:#00ae9d" align="left"/>
  </colgroup>
  <tr><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th></tr>
  <tr><td>陈超</td><td>男</td><td>18</td><td>商学院</td></tr>
  <tr><td>曾苇</td><td>女</td><td>19</td><td>教师教育学院</td></tr>
  <tr><td>张龄予</td><td>女</td><td>17</td><td>人文学院</td></tr>
  <tr><td>俞申琅</td><td>男</td><td>20</td><td>建筑与土木工程学院</td></tr>
 </table>
结果:

有关表格的标签学习(一)_第4张图片

 

注:关于标签和标签属性的具体含义及用法请参考:http://www.w3school.com.cn/tags/tag_table.asp

你可能感兴趣的:(有关表格的标签学习(一))