HTML常用标签之表格标签

一、表格主要作用

表格主要是用于显示、展示数据，而不是用来布局页面的。

二、表格的基本语法

1.<table></table>是用于定义表格的标签；

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中；

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中；

4.字母td指表格数据(table data)，即数据单元格的内容。

  <table><tr>            <td>单元格内文字</td>...</tr>...</table>

三、表头单元格标签

一般表头单元格位于表格第一行或第一列，表头单元格里的文本内容加粗居中显示

<th></th>标签表示HTML表格中的表头部分

   <table><tr><th>表头内容</th>         ...</tr>...</table>

四、表格属性

表格标签属性这部分在实际开发中不常用，后面通过CSS来设置

属性名	属性值	描述
align	left/center/right	规定表格相对周围元素的对齐方式
border	1或者" "	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

   <!--这些属性要写到表格标签tabLe里面去--><table align="center" border="1" cellpadding="0" cellspacing="0" width="500"><tr><th>姓名</th><th>性别</th> <th>年龄</th></tr><tr><td>刘德华</td><td>男</td> <td> 56 </td></tr><tr><td>张学友</td><td>男</td> <td> 58 </td></tr><tr><td>郭富城</td><td>男</td><td> 51 </td></tr><tr><td>黎明</td><td>男</td><td>57 </td></tr></table>

五、表格结构标签

使用场景：因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表格结构。

1.<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签，一般是位于第一行；

2.<tbody></tbody> :用于定义表格的主体，主要用于放数据本体；

3.以上标签都是放在<table></table>标签中。

六、合并单元格

合并单元格方式：
跨行合并:rowspan="合并单元格的个数”

跨列合并: colspan="合并单元格的个数”

目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码

跨列︰最左侧单元格为目标单元格,写合并代码

合并单元格三步曲：

1．先确定是跨行还是跨列合并。

2．找到目标单元格.写上合并方式=合并的单元格数量。比如: <tdcolspan= “2”></td>。

3．删除多余的单元格。
代码展示：

<table width="600" heigth="456" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>

效果图：

七、案例：小说排行榜

先书制作表格结构：

1.第一行里面是th表头单元格

2.第二行开始里面是td普通单元格

3.单元格里面可以放任何元素,文字链接图片等都可以

后书写表格属性：

1.用到宽度高度边框cellpadding和cellspacing

2.表格浏览器中对齐align

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>今日小说排行榜</title>
</head>
<body><table align="center" width="500" heigth="249" border="1" cellspacing="0" ><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="data:images\down.jpg"></td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>2</td><td>盗墓笔记</td><td><img src="data:images\down.jpg"></td><td>124</td><td>675432</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="data:images\th.jpg"></td><td>212</td><td>7654</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>4</td><td>红楼梦</td><td><img src="data:images\th.jpg"></td><td>23</td><td>76542</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>5</td><td>甄嬛传</td><td><img src="data:images\down.jpg"></td><td>212</td><td>7654</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>6</td><td>水浒传</td><td><img src="data:images\th.jpg"></td><td>342</td><td>76514</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr><td>7</td><td>三国演义</td><td><img src="data:images\th.jpg"></td><td>345</td><td>76154</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr></table>
</body>
</html>