HTML&CSS基础学习笔记1.16-单元格间距和表格主体 -

octopole

浏览: 70010 次
性别:
来自: 杭州

最近访客更多访客>>

wapapapapapapow

cyouakari

zhoufh

loiyil

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML&CSS基础学习笔记1.16-单元格间距和表格主体

博客分类：

HTML

html 表格主体单元格间距 cellspacing tbody

上一篇讲html学习笔记，讲过了合并单元格，那么今天就来介绍下如何控制单元格的间距，以及表格主体的相关知识。

单元格间距

在上个知识点的显示结果中你可能发现了，单元格与单元格之间有一小段空白。这是由<table>的[cellspacing]属性控制的：

<!DOCTYPE html>  
<htmllang="en">  
<head>  
    <metacharset="UTF-8">  
    <title>单元格间距 cellspacing</title>  
</head>  
<body>  
    <h2>观察cellspacing的作用</h2>  
    <tableborder="1"cellspacing="1">  
        <tr><td>第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td></tr>  
        <tr><td>第四个单元格</td><td>第五个单元格</td><td>第六个单元格</td></tr>  
        <tr><td>第七个单元格</td><td>第八个单元格</td><td>第九个单元格</td></tr>  
    </table>  
</body>  
</html>

这种情况下的表格是这样的：

表格的主体

在我们经常使用的数据表格中，并不是所有行都表示数据，一般第一行会定义一些表头的信息，后面才是表格的正文主体，如：

如下代码是<tbody>标签的使用方法：

<table>
  <tbody>
    <tr>
      <td>主体</td> 
    </tr>
  </tbody>
</table>

现在就让我们使用下tbody标签吧：

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>使用tbody标签</title>
</head>
<body>
    <h1>使用tbody标签</h1>
    <tableborder="1">
        <tbody>
        <tr><td>第一个单元格</td><td>第二个单元格</td></tr>
        <tr><td>第三个单元格</td><td>第四个单元格</td></tr>
    </table>
</body>
</html>

结果如何呢？