html 怎么让tr的css覆盖td的_HTML表格

最新推荐文章于 2023-07-02 14:42:19 发布

weixin_39908462

最新推荐文章于 2023-07-02 14:42:19 发布

阅读量449

点赞数

文章标签： html 怎么让tr的css覆盖td的 html 表格 html两端对齐 html合并单元格 html无序列表横向排列 html漂亮表格效果

上期文章：

panda456：有序列表&无序列表zhuanlan.zhihu.com

HTML支持插入表格，下面我们就来看看如何插入表格。

注意：上期文章中我们知道了如何插入有序列表和无序列表，这个「列表」和我要讲的「表格」是一个不一样的东西。表格是有行和列的。

创建表格

我们要用到<table>标签，里面要嵌套行标签<tr>，每行要嵌套表头单元格标签<th>，以及每个普通单元格标签<td>。下面是一个例子：

<!DOCTYPE html>
<html>
<body>
  <h2>一个表格</h2>
  <table style="width:100%">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>李华</td>
      <td>男</td>
      <td>30岁</td>
    </tr>
    <tr>
      <td>张伟</td>
      <td>男</td>
      <td>17岁</td>
    </tr>
    <tr>
      <td>李芳</td>
      <td>女</td>
      <td>26岁</td>
    </tr>
  </table>
</body>
</html>

效果如下图：

从上面的例子中，我们知道<table>是一个表格的总标签，tr表示表格的每一行，<th>和<td>都表示一个单元格，但前者是表头的单元格，后者是表格下面部分的单元格。每个单元格里可以包含几乎所有的HTML元素，例如文本、链接，甚至是另一个表格。

为什么要style="width:100%"？这是因为我想让表格对齐网页两边，如果没有这个属性的话，那么表格将会按照内容自动调整宽度，这时候表格会很窄。这是为了美观考虑。

添加边框

默认的表格是没有边框的，我们可以根据需要，用CSS设置表格的边框。我更喜欢将每个单元格设置边框，然后将整个表格围起来，因此我这样写代码：

table,th,td {
border:1px solid black;
}

效果如下：

通过上图，你会发现，这样的代码所展现出来的表格边框会有两行，也就是说边框并没有重合在一起。怎么办呢？我们可以用CSS中的border-collapse来设置：

table,th,td {
border:1px solid black;
border-collapse:collapse;
}

调整表头的对齐方向

默认情况下，表头会显示为粗体，并居中。我们依旧可以用我们之前讲过的方法，调整表头的对齐方向，让它左对齐、右对齐或两端对齐。例如：

th {
text-align:left;
}

设置边框间距

如果你不喜欢将边框重合在一起，那么你还有一个选择：设置两条边框之间的间距。很简单，只需添加CSS中的border-spacing属性即可：

table {
border:1px solid black;
border-spacing:10px;
}

注意：如果已设置边框重叠，那么边框间距不起作用。

合并单元格

如果想使其中一个单元格跨越多行（或多列），也就是我们在Excel中说的合并单元格，那么就需要用到元素的colspan和rowspan属性，它们的属性值表示合并多少个单元格。前者用于横向合并，后者用于纵向合并。我举一个例子，大家就明白了：

<!DOCTYPE html>
<html>
<head>
  <style>
  table, th, td {
    border:1px solid black;
    border-collapse:collapse;
    }
  th, td {
    padding:5px;
    text-align: left;
    }
  </style>
</head>
<body>
  <h2>示例</h2>
  <table style="width:100%">
    <tr>
      <th>姓名</th>
      <th colspan="2">电话</th>
    </tr>
    <tr>
      <td>张三</td>    
      <td>88888888</td>    
      <td>77777777</td>
    </tr>
    <tr>
      <td>李四</td>
      <td colspan="2" rowspan="2">66666666</td>
    </tr>
    <tr>
      <td>王五</td>
    </tr>
  </table>
</body>
</html>

效果如下图：

在上面这张表格中，张三拥有两个电话号码，分别是88888888和77777777，而李四和王五共用一个电话66666666。

给表格添加标题

表格的标题可以说是一张表格不可或缺的部分。添加表格的标题，需要用到<caption>标签：

<!DOCTYPE html>
<html>
<head>
  <style>
  table, th, td {
  border:1px solid black;
  border-collapse:collapse;
  }
  th, td {
  padding:5px;
  text-align: left;
  }
  </style>
</head>
<body>
  <h2>示例</h2>
  <table style="width:100%">
    <caption>三人的电话号码</caption>
    <tr>
      <th>姓名</th>
      <th colspan="2">电话</th>
    </tr>
    <tr>
      <td>张三</td>          
      <td>88888888</td>          
      <td>77777777</td>
    </tr>
    <tr>
      <td>李四</td>
      <td colspan="2" rowspan="2">66666666</td>
    </tr>
    <tr>
      <td>王五</td>
    </tr>
  </table>
</body>
</html>

效果如下：

注意：<caption>标签必须紧跟着<table>标签。

这篇文章讲的内容比较多，可以先点赞+收藏将这篇文章放进收藏夹中备用，可以当做工具性文章，日后再反复琢磨。

下期文章：

panda456：块级元素&内联元素zhuanlan.zhihu.com

weixin_39908462

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 怎么让tr的css覆盖td的_HTML表格

上期文章：panda456：有序列表&无序列表zhuanlan.zhihu.comHTML支持插入表格，下面我们就来看看如何插入表格。注意：上期文章中我们知道了如何插入有序列表和无序列表，这个「列表」和我要讲的「表格」是一个不一样的东西。表格是有行和列的。创建表格我们要用到<table>标签，里面要嵌套行标签<tr>，每行要嵌套表头单元格标签<th>，...
复制链接

扫一扫