首页 前端知识 HTML第二章 “表格”详解 (附带详细代码与解释)!!!

HTML第二章 “表格”详解 (附带详细代码与解释)!!!

2024-03-12 01:03:45 前端知识 前端哥 688 171 我要收藏

目录

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>

 每日一句

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3643.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!