表格的基本使用

七野..

于 2022-01-03 20:20:27 发布

阅读量390

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_64719055/article/details/122291297

版权

1.HTML中提供的表格标签：

2.表格的跨行与跨列

1.HTML中提供的表格标签：

table 表格框架

tr 行标签

td 单元格标签

<body>
		<!-- th 另类单元格标签 特点：自动加粗和自动居中  -->
		<!-- 5行4列的表格 内容是666-->
		<!-- table>tr*5>td*4>{666} -->
		<!-- 表格的属性
			border  边框  0 隐藏  1  显示  >1控制粗细
			width|height 宽度和高度
			align 表格在网页上的对齐方式 （水平对齐）有right left center
			valign （垂直居中） top上 middle中  bottom下
			bgcolor 字体的背景颜色
			cellspacing 控制单元格与单元格之间的间距
			cellpadding 内填充（单元格的边框与文本的间距）
			bordercolor 边框线的颜色
			caption 标签 设置表格的标题
		 -->
		<table bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="forestgreen" align="center" border="1" width="70%" height="200">
			<!-- 第1行 -->
			<tr>
				<td>第1行第1个单元格</td>
				<td>第2行第2单元格</td>
				<td>第3行第3个单元格</td>
				<td>第4行第4个单元格</td>
			</tr>
			<!-- 第2行 -->
			<tr>
				<td>第1行第1个单元格</td>
				<td>第2行第2单元格</td>
				<td>第3行第3个单元格</td>
				<td>第4行第4个单元格</td>
			</tr>
			<!-- 第3行 -->
			<tr>
				<td>第1行第1个单元格</td>
				<td>第2行第2单元格</td>
				<td>第3行第3个单元格</td>
				<td>第4行第4个单元格</td>
			</tr>
			<!-- 第4行 -->
			<tr>
				<td>第1行第1个单元格</td>
				<td>第2行第2单元格</td>
				<td>第3行第3个单元格</td>
				<td>第4行第4个单元格</td>
			</tr>
			<!-- 第5行 -->
			<tr>
				<td>第1行第1个单元格</td>
				<td>第2行第2单元格</td>
				<td>第3行第3个单元格</td>
				<td>第4行第4个单元格</td>
			</tr>
			
		</table>
		
	</body>

2.表格的跨行与跨列

colspan|rowspan针对的是单元格

rowspan 跨行

colspan 跨列

<body>
		
		<table border="1" width="100%" height="200">
			<tr>
				<td colspan="3">hdhd</td><!-- 跨3列 也就是三个单元格 -->
				<!-- <td>hdhd</td>
				<td>hdhd</td> -->
			</tr>
			<tr>
				<td>hdhd</td>
				<td rowspan="2">hdhd</td><!-- 跨2行 -->
				<td>hdhd</td>
			</tr>
			<tr>
				<td>hdhd</td>
				<!-- <td>hdhd</td> -->
				<td>hdhd</td>
			</tr>
		</table>
		
		
	</body>