简介 INTRODUCTION学会表格的行合并与列合并很关键!~
相关标签:
table表格
thead可以省略,表示表格表头部分
tbody可以省略,表示表格内容部分
tr表格行
td表格列
th用于表头的列,有加粗效果
colspan列合并,用于列标签
rowspan行合并,用于列标签
设计界面:
源代码分享:
代码语言:javascript复制
<style>
table{
border:1px solid black;
border-collapse:collapse;
}
table tr td,table tr th{
border:1px solid black;
}
</style>
列合并的表
<table>
<thead>
<tr>
<th>1</th>
<th colspan="2">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
行合并的表<br>
法一:
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>
<table>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
法二:
<table>
<thead>
<tr>
<th rowspan="2">1</th>
<th rowspan="2">2</th>
<th>
3
</th>
</tr>
<tr>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
联系作者:刘金玉
长按关注公众号
编程创造城市官网:https://bcczcs.com/