您的位置:首页> 前端教程> HTML教程
文章导航

HTML table表格结构

2018-8-13 09:53| 作者: admin| 查看: 2444| 评论: 0|来自: 蚂蚁部落

表格基本上有如下几个标签构成:

(1).<table>标签用来创建表格的外部框架。

(2).<tr>标签用来创建表格的行。

(3).<th>标签用来创建表头单元格。

(4).<td>标签用来创建tr行中的单元格。

(5).<caption>标签用来创建标题。

(6).<thead>标签用来创建表格的表头。

(7).<tbody>标签用来创建表格的主体部分。

(8).<tfoot>标签用来创建表格的页脚。

一.基本应用代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>   
</head> 
<body> 
<table border="1">
  <tr>
    <td>蚂蚁部落一</td>
    <td>蚂蚁部落二</td>
    <td>蚂蚁部落三</td>
    <td>蚂蚁部落四</td>
  </tr>
  <tr>
    <td>蚂蚁部落一</td>
    <td>蚂蚁部落二</td>
    <td>蚂蚁部落三</td>
    <td>蚂蚁部落四</td>
  </tr>
  <tr>
    <td>蚂蚁部落一</td>
    <td>蚂蚁部落二</td>
    <td>蚂蚁部落三</td>
    <td>蚂蚁部落四</td>
  </tr>
</table>
</body> 
</html>

上面的代码创建一个三行表格,每一行具有三个单元格。

table的border属性用来设置表格的边框,默认值为0,也就是不具有边框。

border="1"表示表格边框的宽度是1px,border="2"表示边框宽度为2px,以此类推。

二.<caption>标签:

此标签用来定义表格的标题,放在表格之内,且紧邻起始<table>标签。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
</head> 
<body> 
<table border="1"> 
  <caption> 蚂蚁部落</caption> 
  <tr> 
    <td>css教程</td> 
    <td>HTML教程</td> 
  </tr> 
  <tr>
    <td>JS教程</td>
    <td>正则教程</td>
  </tr> 
</table> 
</body> 
</html>

每个表格只能够有一个表格标题;默认情况下,标题会一直在表格头部并且居中。

三.<thead>、<tbody>和<tfoot>标签:

这三个标签实现了表格的语义化布局,这样表格所组织的内容结构就更加清晰。

假如,有一个表格,希望对其中的内容进行分组:

(1).一行能够起到表格标题的作用。

(2).一些行是表格的主要数据。

(3).最后一行位于表格最底部的总结类型的行。

上面的要求就可以使用这三个标签进行实现。

还有一个技巧,就是将三个标签以<thead>、<tfoot>和<tbody>顺序排列,那么表格展现的时候出现的顺序会和三个标签的排列顺序一样;<tbody>中的数据可能会很大,导致数据表格加载延迟,但是因为已经显示了表格的头部和尾部,一定程度提高了网页的友好度,还有在打印的时候,可能表格中的数据非常的长,需要多张打印纸,这个时候表格头部和尾部内容会出现在每一张打印纸上。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<body>
<table border="1">
  <thead>
    <tr>
      <th>蚂蚁部落版块</th>
      <th>蚂蚁部落的目的</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>2个版块</td>
      <td>免费教材和交流</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>div+css</td>
      <td>div+css免费教材和交流</td>
    </tr>
    <tr>
      <td>html专区</td>
      <td>html免费教材和交流</td>
    </tr>
  </tbody>
</table>
</body>
</html>

<thead>行中没有使用<td>单元格,而是使用<th>,当然这也是语义化布局的一部分;<th>其实是一个特殊的<td>单元格,唯一的区别就是<th>中的字体会默认加粗。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部