小白教程
所有教程
关于
Search
172.70.126.42
172.70.126.42
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML表格边框”的源代码
本页内容
上一节:
HTML表格
下一节:
HTML表格宽度高度
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[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> <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> == 折叠的边框 == 为避免出现上例中的双边框,请将 CSS''' <nowiki>border-collapse</nowiki> ''' 属性设置为''' <nowiki>collapse</nowiki> '''. 这将使边框折叠成单个边框: <sample title="" hererun="s" desc="" > <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> </sample> == 样式表 == 如果为每个单元格设置背景颜色,并将边框设置为白色(与文档背景相同),您会得到不可见边框的印象: <sample title="" hererun="s" desc="" > <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> == 圆角 == 使用该''' <nowiki>border-radius</nowiki> '''属性,边框会变成圆角: <sample title="" hererun="s" desc="" > 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> ''' <nowiki>table</nowiki> '''通过从 css 选择器中省略table元素选择来跳过表格周围的边框: <sample title="" hererun="s" desc="" > 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> == 虚线 == 使用该''' <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="" > <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> == 颜色 == 使用该''' <nowiki>border-color</nowiki> '''属性,您可以设置边框的颜色。 <sample title="" hererun="s" desc="" > <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>
返回至“
HTML表格边框
”。
上一节:
HTML表格
下一节:
HTML表格宽度高度