有关表格的标签学习（一）

2019独角兽企业重金招聘Python工程师标准>>>

概述：

表格相关的标签有：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>

结果：

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>

结果：

 

 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>

结果：

 

 

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>

结果：

 

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

转载于:https://my.oschina.net/xngiser/blog/14503