表格
表格可以使网页上显示的文字更加整齐,有条理。表格还可以实现网页的布局
- 一个完整的表格由一对
<table>
标签来定义。 - 每个表格均有若干个单元行(由一对
<tr>
标签定义) 组成。 (行 row) - 每个单元行由若干个单元格(由一对
<td>
标签定义)组成。<th>
:字体加粗 - 表格内的具体信息放置在单元格中。
- 单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。
语法:
<table>
<tr>
<td>单元格内容</td>
<td>单元格内容</td>
…
</tr>
…
</table>
<table>
标签的常用属性
属性 | 说明 |
---|---|
border | 表格的边框的宽度,一般由CSS实现 |
width | 以百分比或像素指定表格的宽度 |
height | 以百分比或像素指定表格的高度 |
cellspacing | 表格中相邻单元格的间距以及单元格外边沿与表格边沿之间的间距。 |
cellpadding | 单元格的边沿和它的内容的间距,一般由CSS实现 |
colspan | 跨列 |
rowspan | 跨行 |
<thead>
、<tbody>
、<tfoot>
标签
- 从结构上来看,表格可以分成表头、主体和表尾三个部分,分别使用
<thead>
、<tbody>
、<tfoot>
标签来表示。 - 表头和表尾一张表格只能有一个,而一张表格可以有多个主体。
- 对于大型的表格来说,应该使
<tfoot>
出现在<tbody
>的前面,这样浏览器在显示数据时,有利于加快表格的显示速度。另外,<thead>、<tbody>、
标签内部都必须使用
`标签。 - 使用
<thead>
、<tbody>
、<tfoot>
对表格进行结构划分的好处是可以先显示<tbody>
的内容,而不必等整个表格下载完成后才能显示。 - 无论
<thead>
、<tbody>
、<tfoot>
的顺序如何改变,<thead>
的内容总是在表的最前面,<tfoot>
的内容总是在表的最后面。
练习:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学生信息表</title></head>
<body>
<table width: 60% cellspacing="2" cellpadding="3" border="1px">
<tr>
<td rowspan="5" style="background-color: darkorange">学生</td>
<td colspan="6" style="background-color: aqua;color: red">学生信息表
</td>
</tr>
<tr style="background-color: salmon">
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
<td>住址</td>
</tr>
<tr style="background-color: darkgray">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
<tr style="background-color: darkgray">
<td>2</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
<tr style="background-color: darkgray">
<td>3</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
</table>
</body>
</html>
<!--设置样式属性的两种方式
1. 直接在标签(默认属性)里面写 eg : <table width=”10px”>
2. 写在style="样式",style 里面 ,
eg : <table style="background-color: red" >
注意: 第一种方式 属性与值之间 是用 “=”连接的
第二种方式 属性与值之间是用 “:” 连接的
如果第一种方式没有实现样式,可能的原因是该属性不是该标签的默认属性。
解决方法:将该属性移动到style里面试一试(记得注意连接符)
如果第二种方式的某个样式属性没有效果,解决方式::使用第一种方式试一试
rowspan:跨行
colspan:跨列
-->
<table width = “60%”>
%表示以 浏览器页面的宽度作为基础计算table的宽度,因为table标签外面就是body标签。
<tr width = “50%”>
这个依据父类标签的宽度 来计算该标签的宽度。
一般用%设置宽高,只需要在 table标签中设置 width = “50%”。