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