正文
css表格的样式,css表格样式添加边框
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么用CSS设置html中的表格边框样式
设置表格的样式可以直接使用css的border样式来设置的。
工具原料：编辑器、浏览器
1、设置一个表格的外边框为红色，内边框的为黄色，代码如下：
body
table
tr
td知道/td
td知道/td
td知道/td
/tr
tr
td知道/td
td知道/td
td知道/td
/tr
tr
td知道/td
td知道/td
td知道/td
/tr
/table
style
table {
border:1px solid red;
}
td{
border: 1px solid yellow;
}
/style
/body
2、运行的效果如下：
相关问答
Q1: CSS 表格属性
CSS表格属性用于设置HTML表格的样式，HTML表格由 table/table 标签嵌套 tbody ， tr ， td 等标签组成，一个HTML表格默认至少包含table，tbody，tr，td四个元素。
CSS表格属性：
显示表格边框有时候特别重要，它能让表格结构更清晰。
默认的表格有双边框，这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
Q2: 怎么设置css表格的样式(颜色等)
下面来个例子，你可以复制到你的编辑器里修改测试
style type="text/css"
table.gridtable {}{
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {}{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {}{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
/style
!-- Table goes in the document BODY --
table class="gridtable"
tr
thInfo Header 1/ththInfo Header 2/ththInfo Header 3/th
/tr
tr
tdText 1A/tdtdText 1B/tdtdText 1C/td
/tr
tr
tdText 2A/tdtdText 2B/tdtdText 2C/td
/tr
/table
CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
Q3: css表格样式怎么实现？
table{
border-collapse: collapse; //相邻边被合并
background-color: #cccccc; //设置表格背景色
border-top: 1px solid #000000; //设置表格上边框颜色
border-left: 1px solid #000000; //设置表格左边框颜色
border-right: 1px solid #000000; //设置表格右边框颜色
border-bottom: 1px solid #000000; //设置表格下边框颜色
}
td {
border-right: 1px solid #000000; //设置td颜色
border-bottom: 1px solid #000000; //
}
表格制作练习可以到实战帮。
