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

目录

相关笔记

一、基本结构

二、相关属性(可以直接写在标签里)

 三、合并单元格

 实践:做一个 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啦!

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐