html基础 表格的相关属性使用
2024-09-02 13:30:01
1.1表格的基本标签
语法结构：<table> /*整体包裹部分,包裹多个tr */
<tr> /* 表格的每一个行，包裹td */
<td></td> /*表格的单元格,包裹内容 */
</tr> </table>
2.1表格相关属性
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
html结构代码：
<table border='1' width='300' height='300'> /* */
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
效果图：
2.2 表格标题和表头单元格；表格标题：是表格上方的标题； 表头单元格：表格内部第一行加粗的文字
html 结构代码
<table border='1' width='300' height='300'>
<caption><h3>学生成绩单</h3></caption> /*caption 表格标题*/
<tr>
<th>姓名</th> /*th 是表头单元格*/
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
注意：caption标签一定要写table标签内部
th标签书写在tr标签内部、替换第一个行的td
3.1 表格的结构标签（了解，可有可无）
| 标签 | 作用 |
| thead | 表格头部 |
| tbody | 表格身体 |
| tfoot | 表格底部 |
用于包裹tr标签的
4.1合并单元格 （1）单元格合并原则 ：
1。上下合并 -->只保留最上面的，删除其他
2. 左右合并 -->只保留最左边的，删除其他 （2）给保留的单元格设置：跨行合并（rowspan='2' 2表示合并两行） 跨行合并（colspan='2'）
注意：不能夸结构合并的，也就thead和tbody两个结构不能跨过合并
html 结构代码
<table border='1' width='300' height='300'>
<caption><h3>学生成绩单</h3></caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- <td>100分</td> -->
<td>小姐姐真漂亮</td>
</tr>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- <td>郎才女貌</td> -->
</tr> </table>
最新文章
- iOS之04-方法的声明和实现
- Flowplayer-Subtitle
- 防止刷新/后退引起的重复提交问题的Java Token代码，非Struts
- JVM的类装载子系统
- [PA2014] [BZOJ 3709]~[BZOJ 3719] 合集
- 【转载】Hadoop和大数据：60款顶级大数据开源工具
- composer的create-project安装php框架laravel for mac教程
- TCPDUMP详解(续)
- iOS显示PDF
- jQuery执行流程：
- 五 Android Capabilities讲解
- 【机器学习】代价函数（cost function）
- java mvn:安装jar包
- redis知识点
- Android 屏幕适配问题分析
- catalan 递推
- Centos 7 开启BBR
- java 使用grpc步骤
- scala map操作 简单总结
- linux内核分析 第三周