写一个边框10px的网页表格html和css
时间: 2023-07-31 13:08:57 浏览: 56
以下是一个边框10px的网页表格的HTML和CSS代码:
HTML代码:
```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代码:
```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代码:
```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代码:
```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`,消除最后一行的下边框。
用html5和css3写一个表格
好的,我可以为你提供一个简单的HTML5和CSS3表格示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS3 Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #f2f2f2;
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>HTML5 CSS3 Table Example</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>Smith</td>
<td>45</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这个表格包括了一个HTML5的文档结构,以及一个带有表头和表体的表格。CSS3样式被应用于表格,包括边框合并、单元格内边距、单元格对齐方式和斑马条纹效果。你可以将这个示例代码复制到一个HTML文件中并查看效果。