很多小伙伴搞不清楚表单怎么构建,其实很简单,请看图:
看完上面两张图之后是不是清晰多了呢。
通常我们都是对整个table,th,td进行操作,其中table的高是由表单的列数决定的,下面是一个简单的表单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 400px;
// 将th和td的边框线合并
border-collapse: collapse;
}
td,th{
border:1px solid #b8daff;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td{
padding:10px;
color:#666;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
如果你想要更好看的样式,可以尝试用下面的css代码:
table {
border-collapse: collapse;
text-align: center;
}
table thead tr th {
padding: 5px 20px;
background-color: blue;
font-weight: 400;
color: #fff;
}
table tbody tr td {
padding: 5px 20px;
border-top: 1px solid blue;
}
table tbody tr:nth-child(2n) td {
background-color: lightblue;
}
table tbody tr:last-child td {
border-bottom: 1px solid blue;
}
如果你觉得文章对你有帮助,请多多支持,谢谢!