实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css表格</title>
<style type="text/css">
.one td th
{
border:1px solid black;
/*border-radius: 50%;*/
/*text-align: center;*/
}
.one{
width: 100%
text-align: center;
margin: 50px auto;
border-collapse: collapse;
background-image: url(timg.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
}
/*th,td{ padding: 10px; }*/
.one th { height: 150px;
width: 59px;
text-align: center;
}
.one th img{
vertical-align: left;
border-radius: 50%;
box-shadow: 5px 5px 5px #888;
}
.one td{
padding: 8px;
text-align: center;
}
.one caption
{
caption-side: top;
margin-bottom: 40px;
font-size: 1.6em;
text-shadow: 5px 6px 5px rgba(0,0,0,3)
}
/*.one ul { text-align: center; }*/
</style>
</head>
<body>
<table class="one" border="1">
<caption>苹果笔记本机型对照表</caption>
<tr>
<th>机型</th>
<th >
<ul type="none">
<li><img src="book.jpg" alt="" width="100px"></li>
<br>
<li>macbook</li>
</ul></th>
<th>
<ul type="none">
<li><img src="air.jpg" alt="" width="100px"></li>
<br>
<li>macbook air</li>
</ul>
</th>
<th>
<ul type="none">
<li><img src="mac.jpg" alt="" width="100px"></li>
<br>
<li>macbook pro</li>
</ul>
</th>
</tr>
<tr>
<td>屏幕</td>
<td>12 英寸</td>
<td>13 英寸</td>
<td>14 英寸</td>
</tr>
<tr>
<td>内存</td>
<td>4GB</td>
<td>8GB</td>
<td>12GB</td>
</tr>
<tr>
<td>硬盘</td>
<td>128固态</td>
<td>256固态</td>
<td>512固态</td>
</tr>
<tr>
<td>价钱</td>
<td>6666</td>
<td>8888</td>
<td>9999</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
