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