请给我完整的文件代码实现以下功能:一个网站上有个两列三行的表格,两列之间用红色竖细线隔开,单元格内部背景为白色,第一列单元格内容分别是单位、姓名,字体为黑体,下面单元格内部为仿宋国标,表格内所有字体为居中
时间: 2023-06-01 10:04:32 浏览: 100
<!DOCTYPE html>
<html>
<head>
<title>表格样式</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
text-align: center;
background-color: white;
}
.first-col {
font-family: 黑体;
}
.second-col {
font-family: 仿宋_GB2312;
}
</style>
</head>
<body>
<table>
<tr>
<td class="first-col">单位</td>
<td class="second-col">姓名</td>
</tr>
<tr>
<td>XXX公司</td>
<td>张三</td>
</tr>
<tr>
<td>YYY机构</td>
<td>李四</td>
</tr>
<tr>
<td>ZZZ部门</td>
<td>王五</td>
</tr>
</table>
</body>
</html>
相关问题
请给我完整的文件代码实现以下功能:一个网站上有个两列三行的表格,两列之间用红色竖细线隔开,单元格内部背景为白色
### 回答1:
<!DOCTYPE html>
<html>
<head>
<title>Table with red vertical line</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ddd;
background-color: #fff;
}
/* add red vertical line to the table */
td:first-child {
border-right-color: red;
border-right-width: 2px;
border-right-style: solid;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</body>
</html>
### 回答2:
要实现以上功能,可以使用HTML和CSS来构建表格。以下是完整的文件代码示例:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
background-color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td>第一列,第一行</td>
<td>第二列,第一行</td>
</tr>
<tr>
<td>第一列,第二行</td>
<td>第二列,第二行</td>
</tr>
<tr>
<td>第一列,第三行</td>
<td>第二列,第三行</td>
</tr>
</table>
</body>
</html>
CSS代码:
在上述HTML代码中的<head>标签下面添加<style>标签,并写入以下CSS代码:
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
background-color: white;
}
解释:
- 通过设置"border-collapse: collapse;",实现了表格的边框线合并,使红色边框成为竖细线。
- 通过设置"border: 1px solid red;",给每个单元格添加了1像素的红色边框。
- 通过设置"padding: 10px;",给每个单元格添加了10像素的内边距,增加单元格内部的空间。
- 通过设置"background-color: white;",将单元格内部背景色设为白色。
### 回答3:
以下是一个简单的HTML代码实现所描述的功能:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 5px;
}
td:nth-child(odd) {
background-color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
</body>
</html>
```
此代码实现了一个两列三行的表格,使用`border-collapse`属性使边框合并,使用`border`属性设置边框样式,使用`padding`属性设置单元格内边距。同时使用伪类选择器`nth-child(odd)`来选择奇数列,并使用`background-color`属性将其背景颜色设置为白色。
请给我完整的文件代码实现以下功能:一个网站上有个两列三行的表格,两列之间用渐变的红色竖细线隔开,渐变为从上下两端向中间逐渐加深
<!DOCTYPE html>
<html>
<head>
<title>渐变竖线表格</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 80%;
margin: auto;
}
td {
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: center;
}
.col1 {
border-right: none;
background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
}
.col2 {
border-left: none;
background: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
</tr>
<tr>
<td class="col1">3</td>
<td class="col2">4</td>
</tr>
<tr>
<td class="col1">5</td>
<td class="col2">6</td>
</tr>
</table>
</body>
</html>
阅读全文