表格
<table>:用于定义表格,<table../>元素只能包含0个或者1个<caption.../>子元素(定义标题)。有下面几个属性:
cellpadding:指定的是单元格于边框之间的距离。属性值可以是像素值,或者百分比。
cellspacing:指定的是单元格与单元格之间的间距。属性值可以是像素值,或者百分比。
width:指定宽长度,属性值可以是像素值,或者百分比。
<caption>:用于定义表格标题
<tr>:定义表格行,该元素只能包含<th> <td>俩种元素。
<td>:定义单元格,该元素和<div../>一样,包含各类子元素,包括在<td.../>插入一个表格,它还有如下几个属性。
rolspan:指定该单元格跳多少列,该属性值就是一个数字。
rowspan:指定该单元格跳多少行,
height,width:指定单元格的宽高,可以是像素值,或者百分比。
<th>:定义表头,用法和<td>几乎一样,比<td>多文本居中和加粗效果。
<tbody>:定义表格主体,该元素只能包含<tr>元素。
<thead>:定义表格头,用法和<tbody>基本相似,只是功能稍有差别。
<tfoot>:定义表格脚,用法和<tbody>基本相似,只是功能稍有差别。
<tbody>,<thead>,<tfoot>元素可以让我们对元素进行分组。<thead>包含的内容在<tbody>上面,<tbody>包含的内容在<tfoot>上面。
<col>:该元素用于为表格中的一个或多个列指定属性。该元素只能留在<table../>或<colgroup>元素内。
<colgroup>:该元素为表格中的多个列指定属性值。
下面给一些代码让小伙伴们熟悉一下:
<table border="2" style="border-collapse:collapse">
<caption>课表</caption>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<td>第一节</td>
<td>大四自习</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<td>大四自习</td>
<td rowspan=12> 休息</td>
<td>上课</td>
</tr>
<tr>
<td>第二节</td>
<td>大四自习</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<td>大四自习</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>第三节</td>
<td>大四自习</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<td >大四自习</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>午休</td>
<td colspan=5></td>
</tr>
<tr>
<td>第四节</td>
<td>上课</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<td rowspan="2">大四自习</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>第五节</td>
<td>上课</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>第六节</td>
<td>上课</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<td rowspan=2>上课</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>第七节</td>
<td>上课</td>
<td>大四自习</td>
<td>大四自习</td>
<td>上课</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>晚饭</td>
<td colspan=5></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td>第八节</td>
<td>大四自习</td>
<td>大四自习</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>第九节</td>
<td>大四自习</td>
<td>大四自习</td>
<td>大四自习</td>
<td>上课</td>
<td>上课</td>
<!-- <td></td> -->
<td>上课</td>
</tr>
<tr>
<td>第十节</td>
<td colspan=5 style="text-align: center">大四自习</td>
<!-- <td></td> -->
<td>大四自习</td>
</tr>
<tr>
<td></td>
<td colspan="7">好长啊</td>
</tr>
</table>
<p>cellpadding指的是圆格与圆格边框之间的距离</p>
<p>cellpacing指的是圆格边框与圆格边跨之间的距离</p>
<p>style="border-collapspse可把内外边框合二为一"</p>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/f8a564b537019b43904ffcf33281018c.png)
这里充分利用了<td>标签的跨行跨列来实现的效果图。
现在我们来简单举例一下<tbody>,<thead>,<tfoot>元素分组用法
和如何改变列表的整列属性。
<table border="2" style="border-collapse:collaspe" cellpadding="5px">
<caption>表格的thead tbody tfoot应用</caption>
<colgroup> <!-- //一个修改table列的域 -->
<col style="background:rgb(151, 151, 228)"> <!-- 不设置span的情况下默认第一列 -->
<col span="2" style="background:rgb(230, 79, 79)"> <!--span=2 代表从第二第三行修改-->
<col></col>
<col style="background:chocolate;text-align:center"> <!--这里文本没有居中-->
</colgroup>
<tfoot>
<tr>
<td>004</td>
<td>某某某</td>
<td>男</td>
<td colspan="2">医疗兵</td>
<!-- <td>25</td> -->
</tr>
<tr>
<td>005</td>
<td>张xx</td>
<td>男</td>
<td>adc</td>
<td>33</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>坦克</td>
<td>32</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
<td>狙击手</td>
<td>36</td>
</tr>
<tr>
<td>003</td>
<td>胡xx</td>
<td>男</td>
<td>指挥官</td>
<td celspan="2">19差一点点</td>
</tr>
</tbody>
<thead>
<tr>
<th>成员号</th>
<th>姓名</th>
<th>性别</th>
<th >部门</th>
<th>年龄</th>
</tr>
</thead>
</table>
代码效果:
一、我们可以看到,图中我写的顺序是先<tfoot>,后<tbody>,最后<thead>.的。但是执行排序的顺序是先<thead>,<tbody>
二、<colgroup>是一个修改table列的域,<col>放在里面可以改变table列的属性。
<col style="background:rgb(151, 151, 228)"> 改变了第一列的背景颜色(span不设置的情况下默认第一行);
<col span="2" style="background:rgb(230, 79, 79)"> --span=2 代表从第二第三列修改
<col></col>
<col style="background:chocolate;text-align:center"> 这俩行代码意思跳过第四列修改第五列