table表格

96 阅读1分钟

image.png

    <table>
					<thead>
						<tr>
							<th colspan="2">种类</th>
							<th>年利率(%)</th>
						</tr>
					</thead>

					<tbody>
						<tr>
							<td>活期存款</td>
							<td></td>
							<td>0.72</td>
						</tr>

						<tr>
							<td rowspan="6">定期存款</td>
							<td>3个月</td>
							<td>2.88</td>
						</tr>
						<tr>
							<td>6个月</td>
							<td>3.24</td>
						</tr>
						<tr>
							<td>1年</td>
							<td>3.60</td>
						</tr>
						<tr>
							<td>2年</td>
							<td>4.14</td>
						</tr>
						<tr>
							<td>3年</td>
							<td>4.77</td>
						</tr>
						<tr>
							<td>5年</td>
							<td>5.13</td>
						</tr>

						<tr>
							<td rowspan="2">通知存款</td>
							<td>七天通知</td>
							<td>1.71</td>
						</tr>
						<tr>
							<td>一天通知</td>
							<td>1.17</td>
						</tr>
					</tbody>
				</table>
                                    

样式

  table {
            width: 100%;
            border: 1px solid #000; /* 外部边框 */
            border-collapse: collapse;
    }
  th,
    td {
            padding: 8px;
            text-align: center;
            border: 1px solid #000; /* 单元格边框 */
    }
th {
            background-color: #f0f0f0; /* 浅灰色表头 */
    }