Web前端学习—基础篇(8)_表格的语法和样式有哪些、table如何实现跨行和跨列合并
标签:下载 基础语 The 用途 修改 排列 单元 结构 边框
前端学习——基础篇
三、HTML学习
11、表格
用途:
? 早期 使用表格搭建页面
? 现在 用来显示表格数据
语法
1、基础语法
<table border="1"><!-- 表格容器,用来定义表格 --> <tr><!-- 表格中的行,必须嵌套在table标签内 --> <th>表头单元格</th><!-- 效果:文字加粗,水平、垂直居中 --> <th>单元格</th> </tr> <tr> <td>单元格</td> <td>普通单元格</td><!-- 效果:文字水平居左,垂直居中 --> </tr> </table>
表格包含table、tr行、单元格(th、td); 单元格必须嵌套在tr标签内,它是一个容器,可以放置任意元素
2、复杂语法
<table border="1"> <caption>表格标题</caption><!-- 在表格水平居中位置显示 --> <thead><!-- 表格的头,用来放置标题之类的内容,内部必须有tr标签 --> <tr> <th>表头单元格</th> <th>单元格</th> </tr> </thead> <tbody><!-- 表格的正文,用来放置表格数据,内部必须有tr标签 --> <tr> <td>单元格</td> <td>普通单元格</td> </tr> </tbody> <tfoot><!-- 表格的脚注,用来放置脚注之类的内容,内部必须有tr标签 --> <tr> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table>
在一个表格中,可以有多个tbody标签,但是只能有一个thead、tfoot
特性
1、没有固定宽度的、没有内容的空单元格,默认平分整个表格 2、有内容的,没有固定宽度的单元格,宽度由内容撑开 3、同一列单元格,宽度只会识别一个,取最大值 4、同一行单元格,高度只会识别一个,取最大值
属性
border属性 表格边框
border="0|1"
border="0" 默认,没有边框width属性 表格|单元格宽度
height属性 表格|单元格高度
cellpadding属性 边框和内容之间的距离,单位像素,可以省略
cellspacing属性 单元格之间的距离,单位像素,可以省略,属性值默认为2px
<table border="1" cellpadding="20" cellspacing="10"></table>
合并单元格
跨行合并单元格 rowspan="合并单元格的数量"
跨列合并单元格 colspan="合并单元格的数量"
表格中的css属性
如果有两个属性值,第一个值表示水平方向,第二个值表示垂直方向
如果有一个属性值,表示水平方向和垂直方向的间距
border-collapse: collapse; 边框合并
border-collapse: separate; 边框分离 默认值
border-spacing属性 当边框分离时,行列之间的间距
总结
? 表格优点:方便排列有规律的、结构均匀的内容或数据
? 表格缺点:产生垃圾代码、影响页面的下载时间,灵活性不大,难于修改
Web前端学习—基础篇(8)_表格的语法和样式有哪些、table如何实现跨行和跨列合并
标签:下载 基础语 The 用途 修改 排列 单元 结构 边框
原文地址:https://www.cnblogs.com/lsm-boke/p/14532547.html