CSS表格布局与HTML表格

在学习HTML和CSS时，我们会发现在CSS布局中有表格，HTML中也有表格，那么这两个表格有什么区别呢？

CSS中的表格是一种布局方式，它比较适合内容需要分栏时使用。而HTML中的表格，是确确实实存在表格数据的。说起表格，大家脑海里就会浮想起行和列来。我们可以把CSS表格想象成一个电子表格，一个个单元格组成，在每个单元格里会包含一个HTML块元素。

本图选自《Head First HTML与CSS》第二版

在表格中增加HTML结构时，我们先要创建一个<div>.这个<div>代表着整个表格。再在每一行里创建一个<div> 。每一列里包含着一个块元素作为它的内容。（两个块元素 “main”(div）和”sidebar”<div> 是不是很简单呢？

HTML：

…
<div id=”tableContainer>
   <div id=”tableRow”>
     <div id=”main”>
       …
</div>
<div id=”siderbar”>
…
</div>
  </div>
</div>
…

CSS创建表格显示：

//这是最外层的<div>
div#tableContainer{
    display:table;  //设置显示方式为表格
}

//tableRow 表示表格中的一行，如果我们有多行，可以使用一个类
div#tableRow{
    display: table-row;
}

#main{
display:table-cell;  //作为表格单元格形式
font-size:105%;
 ．．．．
}

#siderbar{
  display:table-cell;
  padding:15px;
  …….
}

HTML中的表格就是真正意义上的表格了，它由行列，单元格组成，每个单元格里面存放了一些数据。

我们来看个简单的表格

<table>
<caption>这是一个表格</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20/td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>小名/td>
<td>女</td>
<td>30</td>
</tr>
</table>

在这里我建立了一个4行3列的表格，表格以<table>标签开头，<caption>标签是代表表格的标题，我们在浏览器中浏览的时候，一般表格的标题都是显示在表格上方。<th>标签代表表头，tr>代表一行，<td>代表一个单元格。如果实际的元素数小于表格中的列数时，我们只需要写一对<td></td>中间不需要写东西。

不仅这样我们还可以在表格中嵌套表格，比如我要在最后一行的最后一列再嵌套一个表格，我就可以这样写

这里我只给出了一部分代码

<tr>
<td>小名/td>
<td>女</td>
<td>
 <table>
<tr>
<th>语文</th>
<th>分数</th>
</tr>
<tr>
<td>小名</td>
<td>90</td>
</tr>
</table>
</td>
</tr>

我们还可以合并单元格，合并行：rowspan 合并列：colspan

在为表格设置CSS样式时，我们需要注意到的是，我们不能单独地设置单元格的“外边距”，而是要为所有单元格设置一个共同的间距。表格的单元格是没有外边距的。关于表格的CSS样式我就不多提了，因为毕竟文章的重点不在这。

CSS表格布局与HTML表格

猜你喜欢