CSS基础样式-优快云博客

本文链接：https://blog.youkuaiyun.com/prefer__/article/details/148619852

在网页开发里，表格是展示数据的常用工具
先看 HTML 结构
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式</title>
    <style>
    table, td, th
    {
        border:1px solid yellowgreen;
    }
    th
    {
        background-color:yellowgreen;
        color:white;
    }
    td
    {
        padding:15px;
    } 
    td
    {
        text-align:right;
    }
    table 
    {
        width:100%;
    }
    th
    {
        height:50px;
    }
    table
    {
        border-collapse:collapse;
    }
    table,th, td
    {
        border: 1px solid black;
    }
    table, th, td
    {
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <table>
        <tr>
          <th>列标题a</th>
          <th>列标题b</th>
          <th>列标题c</th>
        </tr>
        <tr>
          <td>行a，列a</td>
          <td>行a，列b</td>
          <td>行a，列c</td>
        </tr>
        <tr>
          <td>行b，列a</td>
          <td>行b，列b</td>
          <td>行b，列c</td>
        </tr>
    </table>
    <table>
      <tr>
        <th>列标题a</th>
        <th>列标题b</th>
        <th>列标题c</th>
      </tr>
      <tr>
        <th>行标题a</th>
        <td>行a，列b</td>
        <td>行a，列c</td>
      </tr>
      <tr>
        <th>行标题b</th>
        <td>行b，列b</td>
        <td>行b，列c</td>
      </tr>
  </table>
</body>
</html>

两个表格承载不同数据展示需求。接着用 CSS 进行美化，设置边框时，使用yellowgreen，通过border-collapse:collapse让边框合并，避免出现难看的间隔。表头th设置了背景色yellowgreen和白色文字，height:50px让表头高度合适。单元格td设置padding:15px增加内边距，内容不拥挤，text-align:right让单元格内容右对齐，排版更规整。表格宽度设为width:100%，能适配不通设备宽度。

运行结果如下：