“HTML表格边框”的版本间差异
本页内容
(→如何添加边框) |
(→如何添加边框) |
||
第4行: | 第4行: | ||
为表格添加边框时,还会在每个表格单元格周围添加边框: | 为表格添加边框时,还会在每个表格单元格周围添加边框: | ||
要添加边框,请在 ''' <nowiki>table</nowiki> | 要添加边框,请在 '''<nowiki>table</nowiki> <nowiki>th</nowiki> <nowiki>td</nowiki>''' 元素上使用 CSS''' <nowiki>border</nowiki> '''属性 : | ||
<sample title="" hererun="s" desc="" > | <sample title="" hererun="s" desc="" > |
2022年8月4日 (四) 22:24的最新版本
HTML 表格可以有不同样式和形状的边框。
如何添加边框
为表格添加边框时,还会在每个表格单元格周围添加边框:
要添加边框,请在 table th td 元素上使用 CSS border 属性 :
示例
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
折叠的边框
为避免出现上例中的双边框,请将 CSS border-collapse 属性设置为 collapse .
这将使边框折叠成单个边框:
示例
<style>
table, th, td { border: 1px solid black; border-collapse: collapse;}
</style>
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
样式表
如果为每个单元格设置背景颜色,并将边框设置为白色(与文档背景相同),您会得到不可见边框的印象:
示例
<style>
table, th, td {
border: 1px solid white; border-collapse: collapse;
}
th, td { background-color: #96D4D4; }
</style>
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
圆角
使用该 border-radius 属性,边框会变成圆角:
示例
table, th, td { border: 1px solid black; border-radius: 10px;}
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
table 通过从 css 选择器中省略table元素选择来跳过表格周围的边框:
示例
th, td { border: 1px solid black; border-radius: 10px;}
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
虚线
使用该 border-style 属性,您可以设置边框的外观。
允许使用以下值:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
示例
<style>
th, td {
border: 1px black;
border-style: dotted;}
</style>
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
颜色
使用该 border-color 属性,您可以设置边框的颜色。
示例
<style>
th, td {
border: 1px solid black;
border-color: #96D4D4;
}
</style>
<table>
<tbody><tr>
<td>日期</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:22 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2022年08月04日22:15:25 </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>