本文介绍4款简单常见的纯CSS表格(table)样式。

<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">&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Table_SimpleCSSforHTMLtables&lt;/title&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;viewport&quot;content=&quot;width=device-width,initial-scale=1&quot;&gt; &lt;styletype=&quot;text/css&quot;&gt; 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;#&lt;/th&gt; &lt;th&gt;Make&lt;/th&gt; &lt;th&gt;Model&lt;/th&gt; &lt;th&gt;Year&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;Honda&lt;/td&gt; &lt;td&gt;Accord&lt;/td&gt; &lt;td&gt;2009&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;Toyota&lt;/td&gt; &lt;td&gt;Camry&lt;/td&gt; &lt;td&gt;2012&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;Hyundai&lt;/td&gt; &lt;td&gt;Elantra&lt;/td&gt; &lt;td&gt;2010&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</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样式化表格&lt;table&gt;元素。</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">&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Table_SimpleCSSforHTMLtables&lt;/title&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;viewport&quot;content=&quot;width=device-width,initial-scale=1&quot;&gt; &lt;styletype=&quot;text/css&quot;&gt; 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&gt;tr:last-child&gt;td{ border-bottom-width:0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;tableclass=&quot;pure-tablepure-table-bordered&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;#&lt;/th&gt; &lt;th&gt;Make&lt;/th&gt; &lt;th&gt;Model&lt;/th&gt; &lt;th&gt;Year&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;Honda&lt;/td&gt; &lt;td&gt;Accord&lt;/td&gt; &lt;td&gt;2009&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;Toyota&lt;/td&gt; &lt;td&gt;Camry&lt;/td&gt; &lt;td&gt;2012&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;Hyundai&lt;/td&gt; &lt;td&gt;Elantra&lt;/td&gt; &lt;td&gt;2010&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre><p><br/></p><p>3、只有水平边框的表格(Table with Horizontal Borders)</p><p>如果你喜欢只要水平线边框的表格,那么添加pure-table-horizontal类到表格&lt;table&gt;元素。</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">&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Table_SimpleCSSforHTMLtables&lt;/title&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;viewport&quot;content=&quot;width=device-width,initial-scale=1&quot;&gt; &lt;styletype=&quot;text/css&quot;&gt; 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&gt;tr:last-child&gt;td{ border-bottom-width:0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;tableclass=&quot;pure-tablepure-table-horizontal&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;#&lt;/th&gt; &lt;th&gt;Make&lt;/th&gt; &lt;th&gt;Model&lt;/th&gt; &lt;th&gt;Year&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;Honda&lt;/td&gt; &lt;td&gt;Accord&lt;/td&gt; &lt;td&gt;2009&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;Toyota&lt;/td&gt; &lt;td&gt;Camry&lt;/td&gt; &lt;td&gt;2012&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;Hyundai&lt;/td&gt; &lt;td&gt;Elantra&lt;/td&gt; &lt;td&gt;2010&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</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">&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Table_SimpleCSSforHTMLtables&lt;/title&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;viewport&quot;content=&quot;width=device-width,initial-scale=1&quot;&gt; &lt;styletype=&quot;text/css&quot;&gt; 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;#&lt;/th&gt; &lt;th&gt;Make&lt;/th&gt; &lt;th&gt;Model&lt;/th&gt; &lt;th&gt;Year&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;Honda&lt;/td&gt; &lt;td&gt;Accord&lt;/td&gt; &lt;td&gt;2009&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;Toyota&lt;/td&gt; &lt;td&gt;Camry&lt;/td&gt; &lt;td&gt;2012&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;Hyundai&lt;/td&gt; &lt;td&gt;Elantra&lt;/td&gt; &lt;td&gt;2010&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;Ford&lt;/td&gt; &lt;td&gt;Focus&lt;/td&gt; &lt;td&gt;2008&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;Nissan&lt;/td&gt; &lt;td&gt;Sentra&lt;/td&gt; &lt;td&gt;2011&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;6&lt;/td&gt; &lt;td&gt;BMW&lt;/td&gt; &lt;td&gt;M3&lt;/td&gt; &lt;td&gt;2009&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;7&lt;/td&gt; &lt;td&gt;Honda&lt;/td&gt; &lt;td&gt;Civic&lt;/td&gt; &lt;td&gt;2010&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;8&lt;/td&gt; &lt;td&gt;Kia&lt;/td&gt; &lt;td&gt;Soul&lt;/td&gt; &lt;td&gt;2010&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre><p><br/></p>
RangeTime:0.005614s
RangeMem:215.59 KB
返回顶部 留言