HTML表格标签超详细总结

目录

一、表格的基本结构

​   二、 表格的属性

  1.cellspacing  

 2.cellpadding  

3.border             

 4.align

5.bgcolor=background-color     

6.bordercolor   

 7.rules  

 三、合并单元格

1.colspan属性

2.rowspan属性

 案例

---

一、表格的基本结构

 

<table border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>

 1.   <table></table>

定义表格的基本框架

---

2.    <tr></tr>

定义表格的行

---

   3. <td></td>

定义表格中行内的单元格

---

    4. <th></th>

定义表格中行内的单元格（标题），自动将文本加粗，居中对齐

---

   二、 表格的属性

 table里面放tr，tr里面放td或th
如果有别的元素，放到td或th里

---

  1.cellspacing  

单元格与单元格之间的距离

	<table border="1" cellspacing="" >

			<tr>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
		</table>

 以下是有无设置cellspacing的区别：

---

 2.cellpadding  

内容与单元格边框四周的距离

<table border="1" cellspacing="" cellpadding="20">

			<tr>
				<td></td>
			</tr>
			<tr>
				<td></td>
			</tr>
		</table>

以下是有无设置cellspacing的区别 

---

3.border             

表格边框

<table border="5"  cellpadding="20">

			<tr>
				<td>第一格</td>
			</tr>
			<tr>
				<td>第二格</td>
			</tr>
		</table>

---

 4.align

left              默认居左
center         居中
 right           居右

<table border="5" cellpadding="50" align="center">

			<tr>
				<td>第一格</td>
			</tr>
			<tr>
				<td>第二格</td>
			</tr>
		</table>

table  设置align属性后，就会根据align的值将表格定义在浏览器的水平对齐方向，默认是left

---

5.bgcolor=background-color     

背景颜色

<table border="5" cellpadding="50" bgcolor="pink">

			<tr>
				<td>第一格</td>
			</tr>

		</table>

---

6.bordercolor   

  边框颜色

	<table border="5" cellpadding="50" bordercolor="pink">

			<tr>
				<td>第一格</td>
			</tr>

		</table>

 

---

 7.rules  

规定内侧边框是否可见

 1.  none      没有线条
 2.  rows      位于行之间的线条可见
 3.  cols       位于列之间的线条可见
 4. all        行和列之间的线条都可见

值如下图所示，感兴趣的可以尝试一下

 

---

 三、合并单元格

1.colspan属性

 左右合并单元格 

在这个图中可以看到，本来第一行是有5个单元格，但是第一行的第一个单元格与第二个单元格合并在了一起，

我们合并单元格时都是从左往右开始合并，所以第一行就剩下了4个单元格，也就是说只需要写4个<td></td>，

合并时在第一个单元格里进行合并，有几个单元格进行合并，就在colspan里写几

	<tr>
				<td colspan="2"></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>

 同理，可以得出，在第三行第二个单元格与第三个单元格进行合并时，只需要4个<td></td>标签，并且在第三行的第2个单元格里合并两个单元格

---

2.rowspan属性

 上下合并单元格

 rowspan 是垂直方向的合并单元格，从上往下合并，从图中我们可以看出第二行和第三行的单元格合并了，

根据刚刚我们学习colspan的经验来看，第一行里是五个单元格，不用发生改变，第二行中第一个单元格与第三行的第一个合并了，所以需要在第二行中的<td></td>标签中写rowspan="2"

我们再看第四行，第一个单元格是不是与2-1合并了，所以这一行也只有四个单元格，3-5当然也算啦，它是与第四行单元格合并的

 案例

代码如下：

<table border="" cellspacing="0" cellpadding="20">
			<tr>
				
				<td colspan="3"></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr><tr>
				<td></td>
				<td colspan="2"></td>
				<td></td>
			</tr><tr>
				<td colspan="4"></td>
			</tr>
		</table>

代码如下：

<table border="1" cellspacing="0" cellpadding="20">
			<tr>
				<td></td>
				<td colspan="3"></td>
				<td rowspan="4"></td>
			</tr>
			<tr>
				<td></td>
				<td rowspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>