Skip to content

[html] 第125天 举例说明table怎么合并行和列的？ #1083

New issue
New issue
Open
Open
[html] 第125天 举例说明table怎么合并行和列的？#1083
Labels
htmlhtml
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Aug 18, 2019
Collaborator

第125天 举例说明table怎么合并行和列的？

Activity

haizhilin2013
added
htmlhtml
on Aug 18, 2019
weilaiqishi

weilaiqishi commented on Aug 19, 2019

@weilaiqishi
weilaiqishi
on Aug 19, 2019

多条信息中同一类别（例学生的班级），纵向合并table表格单元格
rowspan属性用在td标签中，用来指定单元格纵向跨越的行数，可以理解为是占了多少位置而不是合并了多少个格子。被占了位置的那一条信息就不用再加同类别td了。
多类别想放到同一格里（例学生的姓名、年龄要放到同一格子），横向合并table表格单元格
colspan属性用在td标签中，用来指定单元格横向跨越的列数

lm101845

lm101845 commented on Sep 22, 2020

@lm101845
lm101845
on Sep 22, 2020

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

公式： 删除的个数 = 合并的个数 - 1

lm101845

lm101845 commented on Sep 22, 2020

@lm101845
lm101845
on Sep 22, 2020
<!DOCTYPE HTML>
<HTML lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table width="400" height="100" border="1">
		<tr>
			<td>123</td>
			<td>abc</td>
			<td>abc</td>
		</tr>
		<tr>
			<td colspan="2">123</td>
			<td>测试</td>
		</tr>
		<tr>
			<td>123</td>
			<td>abc</td>
			<td>abc</td>
		</tr>

	</table>
	1. 先确认跨列合并 colspan
	2. 先上后下  先左右后
	3. 删除的个数
	
	<table width="400" height="100" border="1">
		<tr>
			<td>123</td>
			<td>abc</td>
			<td rowspan="3">abc</td>
		</tr>
		<tr>
			<td>123</td>
			<td>123</td>		
		</tr>
		<tr>
			<td>123</td>
			<td>abc</td>	
		</tr>
	</table>
	1. 先确认跨行合并 rowspan
	2. 先上后下  先左右后
	3. 删除的个数 

</body>
</HTML>
haizhilin2013
mentioned this on Sep 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    htmlhtml

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@weilaiqishi@lm101845

        Issue actions
          [html] 第125天 举例说明table怎么合并行和列的？ · Issue #1083 · haizlin/fe-interview