本文详细介绍了HTML表格的基本组成，包括tr、th和td元素，并展示了如何通过CSS实现表格的边框合并。接着，通过实例演示了如何使用colspan和rowspan属性进行单元格的横向和纵向合并，以及在合并过程中需要注意的单元格删除问题。最后，文章还提到了CSS中的`border-collapse`属性在消除单元格间隙中的应用。
table表格
- 基本组成
- tr：表格行
- th：表头
- td：表格单元
如图所示为3×4的表格
- <table class="up" border="1">
- <tr>
- <th>1</th>
- <th>2</th>
- <th>3</th>
- <th>4</th>
- </tr>
- <tr>
- <td>1</td>
- <td>2</td>
- <td>3</td>
- <td>4</td>
- </tr>
- <tr>
- <td>1</td>
- <td>2</td>
- <td>3</td>
- <td>4</td>
- </tr>
- </table>
- css重置
- 在css样式里写table{border-collapse；}，表示将表格中的单元格间隙合并，现实中定义了表格之后，表格会显示出单元格间隙，呈现出来的如文字上的效果图所示。
经过单元格间隙合并后呈现的效果为：
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
up th ,td{
height: 40px;
width: 140px;
text-align: center;
}
</style>
</head>
<body>
<table class="up" border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
2.th，td{padding：0；}重置单元格默认填充
- 单元格合并
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- table{
- border-collapse: collapse;
- }
- th, td{
- padding: 0;
- }
- up th ,td{
- height: 40px;
- width: 140px;
- text-align: center;
- }
- down th ,td{
- height: 40px;
- width: 140px;
- text-align: center;
- }
- </style>
- colspan：横向合并单元格
想要实现表头日期和天气现象都各自占用两个单元格的情况，则需要使用colspan进行编写（由于日期和天气现象在原有的基础上都各自多占用了一个行单元格，所以需要将原本一行中最后的两个单元格删除来实现）
<table class="up" border="1">
<tr style="background-color: cornflowerblue;height: 40px;">
<th colspan="2" >日期</th>
<th colspan="2" >天气现象</th>
<th>气温</th>
<th>风向</th>
<th>风力</th>
<!-- <th>6</th> -->
<!-- <th>7</th> -->
</tr>
<tr >
<td >22日星期五</td>
<td>白天</td>
<td>3</td>
<td>晶间多云</td>
<td>高温7°</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td>1</td>
<td>白天</td>
<td>3</td>
<td>晶间多云</td>
<td>高温7°</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
</table>
- rowspan：纵向合并单元格
想要实现22日星期五占用右边一列以及下边一个单元格全都合并成为一个单元格时，需要使用rowspan和colspan。（如图所示，想要纵向合并单元格的时候，编写rowspan=“2”，但是会出现原本的下一行同列的单元格被挤出，所以需要将下一行的第一列也要删除，这样才可以达到想要的效果）
<table class="up" border="1">
<tr style="background-color: cornflowerblue;height: 40px;">
<th colspan="2" >日期</th>
<th colspan="2" >天气现象</th>
<th>气温</th>
<th>风向</th>
<th>风力</th>
<!-- <th>6</th> -->
<!-- <th>7</th> -->
</tr>
<tr >
<td rowspan="2" colspan="2">22日星期五</td>
<td>白天</td>
<!-- <td>3</td> -->
<td>晶间多云</td>
<td>高温7°</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td>白天</td>
<!-- <td>3</td> -->
<td>晶间多云</td>
<td>高温7°</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
</table>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
