<p>本文介绍4款简单常见的纯CSS表格(table)样式。</p><p><br/></p><p>1、默认表格(default table)</p><p><img src="//file.outobe.com/6/202212/161134249122.gif"/></p><p>添加pure-table类样式化表格， 此类向表元素添加填充(padding)和边框(borders)，并使表头突出。</p><pre class="brush:html;toolbar:false"><!DOCTYPEhtml>
<html>
<head>
<title>Table_SimpleCSSforHTMLtables</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<styletype="text/css">
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{
margin:10px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td,th{
padding:0;
}
.pure-table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
border:1pxsolid#cbcbcb;
}
.pure-tablecaption{
color:#000;
font:italic85%/1arial,sans-serif;
padding:1em0;
text-align:center;
}
.pure-tabletd,.pure-tableth{
border-left:1pxsolid#cbcbcb;
border-width:0001px;
font-size:inherit;
margin:0;
overflow:visible;
padding:.5em1em;
}
.pure-tablethead{
background-color:#e0e0e0;
color:#000;
text-align:left;
vertical-align:bottom;
}
.pure-tabletd{
background-color:transparent;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>
</html></pre><p><br/></p><p>2、加边框的表格(Bordered Table)</p><p><img src="//file.outobe.com/6/202212/161134242276.gif"/></p><p>为所有单元(cells)添加垂直和水平边框，用pure-table-bordered样式化表格<table>元素。</p><p><br/></p><p>加边框的表格(Bordered Table)</p><p><br/></p><p>加边框的表格(Bordered Table)</p><p><br/></p><p>html代码</p><pre class="brush:html;toolbar:false"><!DOCTYPEhtml>
<html>
<head>
<title>Table_SimpleCSSforHTMLtables</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<styletype="text/css">
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{
margin:10px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td,th{
padding:0;
}
.pure-table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
border:1pxsolid#cbcbcb;
}
.pure-tablecaption{
color:#000;
font:italic85%/1arial,sans-serif;
padding:1em0;
text-align:center;
}
.pure-tabletd,.pure-tableth{
border-left:1pxsolid#cbcbcb;
border-width:0001px;
font-size:inherit;
margin:0;
overflow:visible;
padding:.5em1em;
}
.pure-tablethead{
background-color:#e0e0e0;
color:#000;
text-align:left;
vertical-align:bottom;
}
.pure-tabletd{
background-color:transparent;
}
.pure-table-borderedtd{
border-bottom:1pxsolid#cbcbcb;
}
.pure-table-borderedtbody>tr:last-child>td{
border-bottom-width:0;
}
</style>
</head>
<body>
<tableclass="pure-tablepure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>
</html></pre><p><br/></p><p>3、只有水平边框的表格(Table with Horizontal Borders)</p><p>如果你喜欢只要水平线边框的表格，那么添加pure-table-horizontal类到表格<table>元素。</p><p><img src="//file.outobe.com/6/202212/161134249122.gif"/></p><p>只有水平边框的表格</p><p><br/></p><p>只有水平边框的表格</p><p><br/></p><p>html代码</p><pre class="brush:html;toolbar:false"><!DOCTYPEhtml>
<html>
<head>
<title>Table_SimpleCSSforHTMLtables</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<styletype="text/css">
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{
margin:10px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td,th{
padding:0;
}
.pure-table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
border:1pxsolid#cbcbcb;
}
.pure-tablecaption{
color:#000;
font:italic85%/1arial,sans-serif;
padding:1em0;
text-align:center;
}
.pure-tabletd,.pure-tableth{
border-left:1pxsolid#cbcbcb;
border-width:0001px;
font-size:inherit;
margin:0;
overflow:visible;
padding:.5em1em;
}
.pure-tablethead{
background-color:#e0e0e0;
color:#000;
text-align:left;
vertical-align:bottom;
}
.pure-tabletd{
background-color:transparent;
}
.pure-table-horizontaltd,.pure-table-horizontalth{
border-width:001px0;
border-bottom:1pxsolid#cbcbcb;
}
.pure-table-horizontaltbody>tr:last-child>td{
border-bottom-width:0;
}
</style>
</head>
<body>
<tableclass="pure-tablepure-table-horizontal">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>
</html></pre><p>4、条纹表格(Striped Table)</p><p>当表格较长的时候，通常会用到条纹表格，这样更容易区分数据。在需要改变背景颜色的行tr元素添加pure-table-odd类，便能实现斑马样式的效果。</p><p><img src="//file.outobe.com/6/202212/161134247330.gif"/></p><p>条纹表格(Striped Table)</p><p><br/></p><p>条纹表格(Striped Table)</p><p><br/></p><p>html代码</p><pre class="brush:html;toolbar:false"><!DOCTYPEhtml>
<html>
<head>
<title>Table_SimpleCSSforHTMLtables</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<styletype="text/css">
html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{
margin:10px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td,th{
padding:0;
}
.pure-table{
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
border:1pxsolid#cbcbcb;
}
.pure-tablecaption{
color:#000;
font:italic85%/1arial,sans-serif;
padding:1em0;
text-align:center;
}
.pure-tabletd,.pure-tableth{
border-left:1pxsolid#cbcbcb;
border-width:0001px;
font-size:inherit;
margin:0;
overflow:visible;
padding:.5em1em;
}
.pure-tablethead{
background-color:#e0e0e0;
color:#000;
text-align:left;
vertical-align:bottom;
}
.pure-tabletd{
background-color:transparent;
}
.pure-table-oddtd{
background-color:#f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>
<tr>
<td>5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>
<tr>
<td>6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>
<tr>
<td>7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>
<tr>
<td>8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>
</html></pre><p><br/></p>