html表格

dengdeng52306

已于 2022-08-27 02:14:27 修改

阅读量108

点赞数 1

文章标签： html 前端

于 2022-08-27 02:13:07 首次发布

本文链接：https://blog.csdn.net/weixin_55171701/article/details/126552744

版权

基本语法：

表格属性：

合并单元格：

表格：

用于显示展示数据，优点是规整、可读性好、有条理。

基本语法：

	<table>
<!--		表格标签-->
	<tr>
<!--		行标签-->
	<td>
<!--		列标签-->
		单元格内的数据	
			</td>	
		
		</tr>
		
	</table>

这是一个单元格，如果想要增加行数，在 < table > 标签内添加 < tr > 标签，如果想要增加列数，在 < tr > 标签内添加 < td > 标签。

表头：用于数据的解释和描述在第一列，可以用< th > 标签替代< tr >标签，会有加粗、居中的效果。

表格属性：

不常用一般用css设置。

属性	属性值	解释
align	left、center、right	相对周围的对齐方式
border	正整数	边框
cellpadding	像素	单元格边缘与内容的距离
cellspacing	像素	单元格之间的距离
width/height	像素或百分百	表格宽度/高度

合并单元格：

跨行合并：rowspan = "个数"。既上下合并。

跨列合并：colspan = “个数”。既左右合并。

目标单元格：既写合并代码的单元格，跨行在最上侧写，跨列在最左侧写。

流程：

1、判定跨行还是跨列

2、找到目标单元格写代码

3、删除多余的单元格（被合并了的单元格）

ps：一定要删除多余的单元格，不然表格就会很奇怪。

<body>
	
	<table border="1" height="100" width="100">
	<tr >
		<td rowspan="2">跨行</td>
		<td></td>
		<td></td>
		</tr>
	<tr>
		<td></td>
		<td></td>
		</tr>
	<tr>
		<td></td>
		<td colspan="2">跨列</td>
		
		</tr>
	
	</table>
	
	
</body>