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

目录

相关笔记

一、基本结构

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

 三、合并单元格

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

---

相关笔记

一、基本结构

<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啦！

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