初识html之表格

首先,我们来认识一下表格

长这样

 在html中,表格用标签<table>来定义

表格的行用<tr>定义,列由<td>定义,行和列就组成了单元格

在html中,列标签是包含在行标签中的

表格的语法格式如下:

<table>

     <tr>

         <td>单元格的内容</td>

      </tr>

</table>

如果需要给表格添加边框,我们可以给<table>标签添加border属性,border数值越大,表格边框越粗,反之越细

表格除了可以设置边框外,还可以设置宽高

有时候,我们想让单元格的间隙大一些,可以用到下列属性:

cellspaing属性和cellpadding属性

cellspaing属性是单元格和单元格边框之间的间距

cellpadding属性是单元格与单元格文字之间的间距

如果想让表格居中对齐,可以使用align属性

align="center"时表格相对于页面居中对齐

一般来说,表格的第一行或第一列被我们称为表头,表头标签是<th>,>表头的文本具有居中加粗的效果

把第一行或第一列的<td>标签换成<th>标签就行了

 

严格来说,表格分为头部、主体和页脚三个部分

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

 

<tfooter></tfooter>：用于定义表格的尾部。

位于<table></table>标签中，一般包含网页中底部之外的其他内容。

 

如果想给表格加个标题,我们可以使用<caption></caption>标签

标题标签会水平居中显示

 

有时候为了方便,我们需要将一些行或列进行合并,这种合并叫做合并单元格

跨行合并：rowspan   跨列合并：colspan

合并单元格的思想：

​ 将多个内容合并的时候，就会有多余的东西，把它删除。

例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

​ 公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

好了,表格就讲到这里了

 

(注:本文章纯属原创,转载需注明出处)