HTML5制作表格樣式
發(fā)布時(shí)間：2016-11-15 09:09:08 作者：佚名 
我要評(píng)論
我要評(píng)論本文給大家分享基于html制作的漂亮表格，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
廢話不多說了，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: italic 20px Georgia, serif;
letter-spacing: normal;
background-color: #f0f0f0;
}
#content{
width: 750px;
padding: 40px;
margin: 0 auto;
background-color: #fff;
border-left: 30px solid #1D81B6;
border-right: 1px solid #ddd;
box-shadow: 0px 0px 16px #aaa;
}
#table1{
font: bold 16px/1.4em "Trebuchet MS", sans-serif;
}
#table1 thead th{
padding: 15px;
border: 1px solid #93CE37;
border-bottom: 3px solid #9ED929;
text-shadow: 1px 1px 1px #568F23;
color: #fff;
background-color: #9DD929;
border-radius: 5px 5px 0px 0px;
}
#table1 thead th:empty{
background-color: transparent;
border: none;
}
#table1 tbody th{
padding: 0px 10px;
border: 1px solid #93CE37;
border-right: 3px solid #9ED929;
text-shadow: 1px 1px 1px #568F23;
color: #666;
background-color: #9DD929;
border-radius: 5px 0px 0px 5px;
}
#table1 tbody td{
padding: 10px;
border: 2px solid #E7EFE0;
text-align: center;
text-shadow: 1px 1px 1px #fff;
color: #666;
background-color: #DEF3CA;
border-radius: 2px;
}
#table1 tbody span.check::before{
content: url(images/check0.png);
}
#table1 tfoot td{
padding: 10px 0px;
font-size: 32px;
color: #9CD009;
text-align: center;
text-shadow: 1px 1px 1px #444;
}
</style>
</head>
<body>
<div id="content">
<table id="table1">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>unlimited</td>
</tr>
<tr>
<th scope="row">Mysql Databases</th>
<td>unlimited</td>
<td>unlimited</td>
<td>unlimited</td>
<td>unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>12.90 ___FCKpd___0lt;/td>
<td>12.90 ___FCKpd___0lt;/td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
好了，代碼到此介紹，完美表格效果就制作出來了。
相關(guān)文章
- 這篇文章主要介紹了html中table表格的內(nèi)容水平和垂直居中顯示的相關(guān)資料,需要的朋友可以參考下2017-03-27
HTML用正則表達(dá)式檢驗(yàn)表格的實(shí)例代碼
這篇文章主要介紹了HTML用正則表達(dá)式檢驗(yàn)表格的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-08淺談Html網(wǎng)頁表格結(jié)構(gòu)化標(biāo)記的應(yīng)用
下面小編就為大家?guī)硪黄獪\談Html網(wǎng)頁表格結(jié)構(gòu)化標(biāo)記的應(yīng)用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-26- 下面小編就為大家?guī)硪黄嘘P(guān)HTML表格邊框的設(shè)置小技巧。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-19
- 這是一款將CSV格式數(shù)據(jù)轉(zhuǎn)換成HTML表格形式的工具，可實(shí)現(xiàn)按照逗號(hào)(,)，tab，豎線(|)，空格及自定義字符作為分隔符號(hào)進(jìn)行轉(zhuǎn)換的功能。2016-04-15
- 這篇文章主要介紹了HTML表格布局實(shí)際使用詳解,是HTML入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-28
- 這篇文章主要介紹了html 表格比較寬溢出的解決方法，表格如果比較寬，則有可能溢出，所以下面的方法，大家可以看看2019-09-06
- 給某一表格定義樣式，這也是為了應(yīng)付顯示需求，不得不做的一件事，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-04-23
HTML表格_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
在html中繪制表格使用table標(biāo)簽，tr表示行，td表示列,下面通過代碼實(shí)例給大家介紹HTML表格的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-06-20