HTML 做个漂亮的表格
本期我们主要讲述怎样做一个简单漂亮的表格,外加一点关于 表格 这方面的一些笔记和注意点。目录相关笔记一、基本结构二、相关属性(可以直接写在标签里)三、合并单元格实践:做一个 biu特佛 的表格相关笔记一、基本结构<table><thead><tr><th>姓名</th> <th>性别</th> <th..
本期我们主要讲述怎样做一个简单漂亮的表格,外加一点关于 表格 这方面的一些笔记和注意点。
目录
相关笔记
一、基本结构
<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啦!
这次就分享到这里啦,我们下次再见,祝大家学习进步!
更多推荐
所有评论(0)