写一个边框10px的网页表格html和css

以下是一个边框10px的网页表格的HTML和CSS代码：

HTML代码：

<table class="table-bordered">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

CSS代码：

.table-bordered {
  border: 10px solid #000;
  border-collapse: collapse;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #000;
  padding: 5px;
}

这段代码定义了一个名为 `table-bordered` 的表格样式，其中 `border` 属性设置表格的边框宽度为 10px，`border-collapse` 属性设置表格边框的合并方式为折叠。`th` 和 `td` 元素的边框宽度为 1px，内边距为 5px。

相关问题

写一个无限向下延伸的网页表格html和css

以下是一个无限向下延伸的网页表格的HTML和CSS代码：

HTML代码：

<table class="table-stretch">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

CSS代码：

.table-stretch {
  width: 100%;
  border-collapse: collapse;
}

.table-stretch th,
.table-stretch td {
  border: 1px solid #000;
  padding: 5px;
}

.table-stretch tbody tr:last-child td {
  border-bottom: none;
}

.table-stretch tbody {
  display: block;
  height: 200px;
  overflow-y: auto;
}

这段代码定义了一个名为 `table-stretch` 的表格样式，其中 `width` 属性设置表格的宽度为 100%，`border-collapse` 属性设置表格边框的合并方式为折叠。`th` 和 `td` 元素的边框宽度为 1px，内边距为 5px。`tbody` 元素的 `display` 属性设置为 `block`，`height` 属性设置为 200px，`overflow-y` 属性设置为 `auto`，使表格具有滚动条，可以无限向下延伸。最后一个 `tr` 元素的 `td` 元素的 `border-bottom` 属性设置为 `none`，消除最后一行的下边框。

创建一个宽度为 500px、高度为 400px 表格，使用css 使表格边框折叠，表格中文本居中对齐，选用学院官网图作为背景;

好的，以下是代码实现：

table {
  width: 500px;
  height: 400px;
  border-collapse: collapse;
  background-image: url("学院官网图");
  background-size: cover;
}

td {
  text-align: center;
  border: 1px solid black;
}

解释一下代码：

- 首先设置表格的宽度、高度和背景图片，其中 `background-size: cover;` 表示将背景图片自适应填充整个表格。
- 然后设置单元格的文本居中对齐，并使用 `border: 1px solid black;` 使单元格边框显示出来。`border-collapse: collapse;` 则是将相邻单元格的边框合并为一条，使表格看起来更整洁。

希望这个回答能够解决你的问题，如果还有其他问题，欢迎继续提问！