您的位置:首页> 实例代码> CSS实例

CSS table表格美化

2020-3-12 07:29| 作者: admin| 查看: 404| 评论: 0|来自: 蚂蚁部落

table表格默认并不美观,甚至可以说非常的丑陋,过于原生态。

所以,实际应用中通常会对其进行美化操作,下面分享一段CSS美化案例。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #c0c0c0;
  width: 300px;
}
th,td {
  border: 1px solid #d0d0d0;
  color: #404060;
  padding: 10px;
}
th {
  background-color: #09c;
  font: bold 16px "微软雅黑";
  color: #fff;
}
td {
  font: 14px "微软雅黑";
  text-align: center;
}
</style>
</head>
<body>
<div id="wrapbox">
  <table>
    <thead id="_head">
      <tr>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody id="_tbody">
      <tr>
        <td>1</td>
        <td>CSS教程</td>
        <td>蚂蚁部落</td>
        <td>18</td>
      </tr>
      <tr>
        <td>2</td>
        <td>JS教程</td>
        <td>蚂蚁部落</td>
        <td>18</td>
      </tr>
      <tr>
        <td>3</td>
        <td>HTML教程</td>
        <td>蚂蚁部落</td>
        <td>18</td>
      </tr>
      <tr>
        <td>4</td>
        <td>正则教程</td>
        <td>蚂蚁部落</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

上述代码实现了基本的美化效果,比较简单不多介绍。

相关阅读:

(1).border-collapse参阅CSS border-collapse 属性一章节。

(2).border-spacing参阅CSS border-spacing 属性一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部