HTML 做个漂亮的表格

本期我们主要讲述怎样做一个简单漂亮的表格，外加一点关于表格这方面的一些笔记和注意点。

相关笔记

一、基本结构

<table><thead><tr><th>姓名</th> <th>性别</th> <th>学号</th> <th>个人主页</th></tr></thead><tbody><tr><td>小新</td> <td>男</td> <td>01</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>小葵</td> <td>女</td> <td>02</td> <td><a href="#" target="_blank">个人主页</a></td></tr></tbody>
</table>
/*该表格 三行四列 */

注释：

<table> </table> 指表格；

<tr> </tr> 指一行，有几个就有几行；

<th> </th> 指表头单元格，包含在行里面，有几个就有几列；

<td> </td> 指普通单元格，包含在行里面，有几个就有几列（一般与 th 的个数相同）；

<thead> </thead> 指表格的头部区域（ head 顾名思义头部），一般在里面放表头；

<tbody> </tbody> 指表格的主体区域（ body 顾名思义身体），一般在里面放主要内容。

表头单元格和普通单元格的区别：

表头单元格系统会自动给文字加粗，以示重要，而普通单元格不会。

二、相关属性（可以直接写在标签里）

<table width="70%" height="50px" align="center" border="2" cellpadding="15px" cellspacing="0">

align 指表格相对周围元素的对齐方式，center 表示表格在屏幕上居中；

width 表格的宽度；

height 表格的高度；

border 指表格的边框（表格默认无边框），当设置了数值后，就表示表格有边框了；

cellpadding 指文字与单元格间的空白距离；

cellspacing 指单元格与单元格间的空白距离，默认有距离，一般调为 0 。

如图：

三、合并单元格

跨行合并： rowspan = " 合并单元格数 "，最上面的单元格为目标单元格；

跨列合并：colspan = " 合并单元格数 " ，最左面的单元格为目标单元格。

方法：

1.判断合并类型：跨行合并还是跨列合并；

2.找目标单元格和合并个数；（下面有例子便于理解）;

3.在目标单元格的代码位置加标签（ rowspan 或者 colspan ）;

4.删除多余的单元格；

举例（跨行合并）：

在目标单元格的位置加标签如下：

< td rowspan= "2" > A < /td >； /* A 是目标单元格 */
< td > B < /td >； /*这句要删除*/

合并后如下：

实践：做一个 biu特佛的表格

<h1>班级成员</h1>  /* 标题 */
/* 表格开始 */<table align="center" border="2" cellpadding="15px" cellspacing="0"><thead><tr><th>姓名</th> <th>性别</th> <th>学号</th> <th>个人主页</th></tr></thead><tbody><tr><td>小新</td> <td>男</td> <td>01</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>小葵</td> <td>女</td> <td>02</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>妮妮</td> <td>女</td> <td>03</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>正男</td> <td>男</td> <td>04</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>阿呆</td> <td>男</td> <td>05</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>风间</td> <td>男</td> <td>06</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>小爱</td> <td>女</td> <td>07</td> <td><a href="#" target="_blank">个人主页</a></td></tr><tr><td>小白</td> <td>男</td> <td>08</td> <td><a href="#" target="_blank">个人主页</a></td></tr></tbody></table>

<style>body{background: url(images/20.jpg);   /* biu特佛 的背景图片 */background-size: 100% 100%;color:black;font-size: 23px;    /* 文字大小 */}a{text-decoration: none;    /* 去除链接的下划线 */color:black;}table{width: 70%;height: 50px;text-align: center;    /* 文字在单元格中居中 */}h1{text-align: center;}</style>

效果图基本如下，文字换一换就OK啦！

这次就分享到这里啦，我们下次再见，祝大家学习进步！