<!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 {
border-collapse: collapse;
}
table,
th,
td {
border: none;
text-align: center;
}
tr:nth-child(2n){
background: #fff8d0;
}
.line_all_info {
background: #ffa928;
}
.td_task {
background: #fff4df;
}
.title_info {
background: #ffe27b;
}
</style>
</head>
<body>
<table border="1">
<tr class="line_all_info">
<td colspan="2">line1</td>
<td>w1</td>
<td>w2</td>
<td>w3</td>
<td>w4</td>
</tr>
<tr>
<td class="td_task" rowspan="5">task</td>
<td class="title_info">title1</td>
<td colspan="4">weekly3</td>
</tr>
<tr>
<td class="title_info">title2</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="title_info">title3</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="title_info">title4</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="title_info">title5</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="line_all_info">
<td colspan="2">line1</td>
<td>w1</td>
<td>w2</td>
<td>w3</td>
<td>w4</td>
</tr>
</table>
</body>
</html>
colspan: 用于指定单元格要横跨的列数。
rowspan: 用于指定单元格要纵跨的行数。
效果