15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML——表格制作

HTML——表格制作

时间:2023-09-01 00:06:01 | 来源:网站运营

时间:2023-09-01 00:06:01 来源:网站运营

HTML——表格制作:

1.表格至少包含三个标签:<table>、<tr>、<td>,快捷键:table>tr>td

table:表格,定义的是整个的表格大结构。属性:border边框属性,style样式属性
<!-- 边框宽度为1像素px, style样式边框塌陷,去除边框空隙-->
<table border="1" style="border-collapse: collapse;">caption:表格的标题,内部书写标题文字。
tr:table rows,表格的行,定义的是表格由多少行组成。
td:table data,表格数据,也叫表格单元格,定义的是每一行内部的单元格。
th,table head data,表头单元格,有加粗居中的CSS样式效果
2.单元格合并:rowspan、colspan

rowspan:跨行和并。上下的合并。
colspan:跨列合并。左右的合并。
<!-- 跨行合并2格,跨列合并2格 --><th rowspan="2">地区</th><th colspan="2">总量分</th>3.表格组成通常包含四部分:caption、thead、tbody、tfoot

caption:表格的标题,内部书写标题文字。
thead:table head,表格的头部。内部嵌套tr>th。
tbody:table body,表格的主体。内部嵌套tr>td。
tfoot:table foot,表格的页脚。内部嵌套tr>td。
注意:不管写的顺序怎么样,浏览器都是从caption、thead、tbody、tfoot执行
4.制作技巧

<table border="1" style="border-collapse: collapse;"> <!-- 标题 --> <caption>投资情况</caption> <!-- 头部 --> <thead> <tr> <th rowspan="2">地区</th> <th colspan="2">总量分</th> <th colspan="2">比例分</th> </tr> <tr> <th>自年初累计(亿元)</th> <th>去年同比增长(%)</th> <th>自年初累计(%)</th> <th>去年同期(%)</th> </tr> </thead> <!-- 主体 --> <tbody> <tr> <td>全国</td> <td>123456.90</td> <td>100.0</td> <td>100.0</td> <td>100.0</td> </tr> <tr> <td>全国</td> <td>123456.90</td> <td>100.0</td> <td>100.0</td> <td>100.0</td> </tr> <tr> <td>全国</td> <td>123456.90</td> <td>100.0</td> <td>100.0</td> <td>100.0</td> </tr> <tr> <td>全国</td> <td>123456.90</td> <td>100.0</td> <td>100.0</td> <td>100.0</td> </tr> <tr> <td>全国</td> <td>123456.90</td> <td>100.0</td> <td>100.0</td> <td>100.0</td> </tr> </tbody> </table>
结果显示


关键词:表格

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭