【学习记录】-【HTML：表格】- 表格和单元格边框的显示_ueditor保存表格到数据库,边框不显示

作者：不正经 | 2024-03-24 02:41:28

踩

ueditor保存表格到数据库,边框不显示

在复习的时候我的小伙伴问了我一个问题：

下列哪一种设置能使单元格显示边框（）
A．在<td>中添加 border属性
B．在<table>中添加border属性
C．在<tr>中添加 border属性
D．以上全都可以

我的第一感觉是选择B，随后小伙伴问了我一连串的问题，又让我深入研究了一会，因此做一个记录，做做总结。

从题目看，能知道这个题目考察的是HTML的相关标签，查找HTML手册，能知道只有<table>标签才有border属性。
但是从题目中延伸出来，就触碰到我的知识盲区了，就是可以通过CSS选择器使单元格示边框。
先创建一个表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table-a">
    <table width="300" border="10px">
      <thead>
        <tr>
          <th>a</th>
          <th>b</th>
          <th>c</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="100">1.1</td>
          <td width="100">1.2</td>
          <td width="100">1.3</td>
        </tr>
        <tr>
          <td>2.1</td>
          <td>2.2</td>
          <td>2.3</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

便得到了这样的效果（设置<table>标签的border属性值为10px，表格会出现较宽的边框，单元格也会出现默认的边框），若不设置<table>的border属性值，则表格边界和单元格边框都不会显示。标签border属性值为10px
标签内有设置border属性值
其次，<table>标签能够以table-thead-tbody-tfoot进行分类（一般是table-tr-td），而thead下级中可以有<tr>，在之后有<th>或<td>，但一般是<th>；tbody下级中可以有<tr>，在之后有<th>或<td>，但一般是<td>；因此，可以认为<td>与<th>同级。

如果需要显示单元格边框，可以通过直接在<table>标签内设置border属性（宽度，类型，颜色），虽然设置的是整个表格外部的边框，但内部各单元格也会根据默认值显示边界。如果想要设置各单元格的边框，则需要通过CSS选择器，对<th>或<td>进行设置border。

<!--在网页的<head>标签中添加-->
<style>
  .table-a table td{
    border: 5px dashed #000000
  }
</style>
1
2
3
4
5
6

通过CSS选择器设置单元格边框
前面说过设置<table>标签设置border属性后，单元格自动会显示边框，删除后单元格边框消失了。但再思考一下，如果通过设置CSS样式，再把<table>标签中的border属性删掉，单元格是否还会显示边框吗？答案是肯定的。
标签中的border属性删掉，但设置了CSS样式
因此，虽然只是一道题目，但在考察内容的背后，还是有很多细节需要注意的，这也说明了我自身的还有许多知识坑需要填。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/299336