本教程将教您如何使用CSS设置HTML Table的不同属性。
border-collapse : 设置是否把表格边框合并为单一的边框。
border-spacing : 设置分隔单元格边框的距离。
caption-side : 设置表格标题的位置。
empty-cells : 设置是否显示表格中的空单元格。
table-layout : 设置显示单元、行和列的算法。
border-collapse 属性
设置是否把表格边框合并为单一的边框，该属性可以具有两个值collapse 和separate ，以下示例使用两个值-
<html>
<head>
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td</span><span class="pun">.</span><span class="pln">a </span><span class="pun">{</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">dotted</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">3px</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="lit">000000</span><span class="pun">;</span><span class="pln">
padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
td</span><span class="pun">.</span><span class="pln">b </span><span class="pun">{</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">solid</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="lit">3px</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:#</span><span class="lit">333333</span><span class="pun">;</span><span class="pln">
padding</span><span class="pun">:</span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag"></style></span><span class="pln">
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"two"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption></span><span class="pln">Separate Border Example</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"a"</span><span class="tag">></span><span class="pln"> Cell A Separate Example</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"b"</span><span class="tag">></span><span class="pln"> Cell B Separate Example</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
它将产生以下输出-
border-spacing 属性
border-spacing 属性设置分隔单元格边框的距离。
如果提供一个值，则它将同时应用于垂直和水平边框。或者您可以指定两个值，在这种情况下，第一个是水平间距，第二个是垂直间距-
<style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;} </style>
现在让无涯教程修改前面的示例，看看效果-
<html>
<head>
<style type="text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"one"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption></span><span class="pln">Separate Border Example with border-spacing</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td></span><span class="pln"> Cell A Collapse Example</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td></span><span class="pln"> Cell B Collapse Example</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"two"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption></span><span class="pln">Separate Border Example with border-spacing</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td></span><span class="pln"> Cell A Separate Example</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td></span><span class="pln"> Cell B Separate Example</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
它将产生以下输出-
caption-side 属性
该属性可以具有 top，bottom，left 或 right 四个值之一。
<html>
<head>
<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"top"</span><span class="tag">></span><span class="pln">
This caption will appear at the top
</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell A</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell B</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bottom"</span><span class="tag">></span><span class="pln">
This caption will appear at the bottom
</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell A</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell B</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"left"</span><span class="tag">></span><span class="pln">
This caption will appear at the left
</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell A</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell B</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><caption</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">></span><span class="pln">
This caption will appear at the right
</span><span class="tag"></caption></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell A</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"><tr><td</span><span class="pln"> </span><span class="tag">></span><span class="pln"> Cell B</span><span class="tag"></td></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
它将产生以下输出-
empty-cells 属性
此属性可以具有三个值之一-show，hide或inherit。
<html>
<head>
<style type="text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"empty"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><th></th></span><span class="pln">
</span><span class="tag"><th></span><span class="pln">Title one</span><span class="tag"></th></span><span class="pln">
</span><span class="tag"><th></span><span class="pln">Title two</span><span class="tag"></th></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><th></span><span class="pln">Row Title</span><span class="tag"></th></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"empty"</span><span class="tag">></span><span class="pln">value</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"empty"</span><span class="tag">></span><span class="pln">value</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><th></span><span class="pln">Row Title</span><span class="tag"></th></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"empty"</span><span class="tag">></span><span class="pln">value</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"empty"</span><span class="tag">></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
它将产生以下输出-
table-layout 属性
此属性可以具有以下三个值之一:fixed，auto或inherit。
<html>
<head>
<style type="text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"auto"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100%"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"20%"</span><span class="tag">></span><span class="pln">1000000000000000000000000000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"40%"</span><span class="tag">></span><span class="pln">10000000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"40%"</span><span class="tag">></span><span class="pln">100</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fixed"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100%"</span><span class="tag">></span><span class="pln">
</span><span class="tag"><tr></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"20%"</span><span class="tag">></span><span class="pln">1000000000000000000000000000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"40%"</span><span class="tag">></span><span class="pln">10000000</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"><td</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"40%"</span><span class="tag">></span><span class="pln">100</span><span class="tag"></td></span><span class="pln">
</span><span class="tag"></tr></span><span class="pln">
</span><span class="tag"></table></span><span class="pln">
</body>
</html>
它将产生以下输出-
