HTML第二章 “表格”详解 （附带详细代码与解释）！！！

目录

1.表格的语法

2. 表格的可选标记

3. 表格的属性

4. 不规则的表格

5. 表格的大小

 每日一句

1.表格的语法

1. table标签: 表示表格的开始和结束。表格的所有内容都需要写在这一对标签里
2. tr标签: 表示表格中的一行
3. td标签：要写在tr中，这一行中有几个单元格，就有几列 是真正放数据的地方

2. 表格的可选标记

1. caption标签:表格的标题
2. thead标签:表头部分
3. tbody标签:表的主体部分
4. th标签:行/列的标题，文字加粗显示

5. <table border="1px" bgcolor="green" bordercolor="yellow" width="300px"
   		height="175px">
   			<caption>鲜鱼价目表</caption>
   			<thead><!-- 表头部分 -->
   				<tr>
   					<th>序号</th>
   					<th>鱼的种类</th>
   					<th>价格</th>
   				</tr>
   			</thead>
   			<tbody> <!--表主体部分-->
   				<tr align="center">
   					<td>1</td>
   					<td>草鱼</td>
   					<td>18.6</td>
   				</tr>
   				<tr valign="top">
   					<td>2</td>
   					<td>鲤鱼</td>
   					<td>28.9</td>
   				</tr>
   				<tr>
   					<td>3</td>
   					<td>食人鱼</td>
   					<td>1000</td>
   				</tr>
   			</tbody>
   		</table>复制

   

3. 表格的属性

1. table标签的属性
   1. border="1px"  设置边框
   2. bgcolor="green"  设置背景颜色
   3. bordercolor="yellow"  设置边框颜色
   4. width="300px" 设置表格的宽度
   5. height="175px"  设置表格的高度
   6. table表格里的边框是带有间距的
      1. 解决方案就是给table标签加:
      2. style="border-collapse: collapse;"  
      3. 去掉边框间的间距
   7. align="center" 设置表格本身的水平对齐方式，注意不是文字居中，而是整张表格在页面居中显示
2. tr标签的属性
   1. align="" 设置内容的水平对齐方式 left靠左/center居中/right靠右
   2. valign="" 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下

<!-- 开始编辑第3个表格 -->
	<table border="1px" style="border-collapse: collapse;" width="500px" height="300px" align="center">
		<caption>水果一览表</caption>
		<thead>
			<tr>
				<th>编号</th>
				<th>品种</th>
				<th>价格</th>
				<th>产地</th>
			</tr>
		</thead>
		<tbody>
			<tr bgcolor="green" align="center" valign="top">
				<td>1</td>
				<td>红富士</td>
				<td>12.5</td>
				<td>山东</td>
			</tr>
			<tr>
				<td>2</td>
				<td>水蜜桃</td>
				<td>16.8</td>
				<td>平谷</td>
			</tr>
			<tr>
				<td>3</td>
				<td>西瓜</td>
				<td>22.6</td>
				<td>海南</td>
			</tr>
		</tbody>
	</table>复制

4. 不规则的表格

1. td标签的属性:
   1. colspan="n" 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
   2. rowspan="n" 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)
   3. 被合并的单元格一定得删除！

5. 表格的大小

1. 表格的大小是由内容撑起来的
2. 但如果修改了某个单元格的高度，这一行单元格的高度都会随之改变
3. 同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变

<!-- table>tr*3>td*4 在数字后按Tab补全-->
	<table border="1px" width="300px" height="200px">
		<tr>
			<td colspan="2">1-1</td>
			<!-- 被合并的单元格一定得删掉 -->
			<!-- <td>1-2</td> -->
			<td>1-3</td>
			<td>1-4</td>
		</tr>
		<tr>
			<td>2-1</td>
			<td rowspan="2">2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>
		<tr>
			<td>3-1</td>
			<!-- 被合并的单元格一定要删掉！ -->
			<!-- <td>3-2</td> -->
			<td>3-3</td>
			<td>3-4</td>
		</tr>
	</table>
	<hr>
	<table border="1px">
		<tr>
			<td>1</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td>2222222222222</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>复制

 每日一句

三人行，必有我师焉，择其善者而从之，其不善者而改之。

        "三个人在一起，其中必有某人在某方面是值得我学习的，那他就可当我的老师。我选取他的优点来学习，对他的缺点和不足，我会引以为戒，有则改之。 "