table布局中的一些关键点

 

【table布局点1:表格边框】

?
border-spacing:0;
border-collapse:collapse;

　　显示效果为：

加之前效果

加之后效果

【table布局点2:跨列、跨行的单元格】

复制代码
 1 <html>
 2 
 3 <body>
 4 
 5 <h4>横跨两列的单元格：</h4>
 6 <table border="1">
 7 <tr>
 8   <th>姓名</th>
 9   <th colspan="2">电话</th>
10 </tr>
11 <tr>
12   <td>Bill Gates</td>
13   <td>555 77 854</td>
14   <td>555 77 855</td>
15 </tr>
16 </table>
17 
18 <h4>横跨两行的单元格：</h4>
19 <table border="1">
20 <tr>
21   <th>姓名</th>
22   <td>Bill Gates</td>
23 </tr>
24 <tr>
25   <td rowspan="2">电话</td>
26   <td>555 77 854</td>
27 </tr>
28 <tr>
29   <td>555 77 855</td>
30 </tr>
31 </table>
32 
33 </body>
34 
35 
36 </html>
复制代码

横跨两列的单元格：

姓名电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格：

姓名 Bill Gates
电话 555 77 854
555 77 855

 

一、
1、显示表格的4个边框：<table border frame=box>
2、只显示上边框: <table border frame=above>
3、只显示下边框: <table border frame=below>
4、只显示上下边框: <table border frame=hsides>
5、只显示左右边框: <table border frame=vsides>
6、只显示左边框： <table border frame=lhs>
7、只显示右边框： <table border frame=rhs>
8、不显示任何边框： <table border frame=void>

二、
1、只显示列与列之间的分隔线：<table rules=cols>
2、只显示行与行之间的分隔线：<table rules=rows>
3、不显示任何分隔线： <table rules=none> (只显示四个边框)
4、显示所有分隔线： <table rules=all>

但是还要提醒的是，nc不支持这些表格属性！

 

posted @   Seaurl  阅读(337)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae