您的位置: 首页  >  技术问答  >  小白关于表格的问题 ：两个表格不同怎么合并

小白关于表格的问题 ：两个表格不同怎么合并

分类: 技术问答 • 2022-02-27 21:12:54

小白关于表格的问题 ：两个表格不同怎么合并

问题描述：

刚开始学遇到的小白问题，表格怎么让两个栏位不同的表格排到同一个表格里面，或者说怎么让两个表格无缝衔接，如果做在同一个表格里面就得要求表格中间的分隔线必须从上到下是一个整体，代码如下：
<html>

<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
td {
text-align: center;
}
</style>
</head>

<body>
<table align="center" border="1" cellspacing="0" cellpadding="0">
<tr height="50">
<td width="60" rowspan="5">个<br />人<br />信<br />息</td>
<td width="100">姓名</td>
<td width="200"></td>
<td width="80">性别</td>
<td width="200"></td>
<td width="120">出生年月</td>
<td width="250"></td>
<td width="160" rowspan="4">贴<br />照<br />片<br />处</td>
</tr>
<tr height="50">
<td width="100">民族</td>
<td width="200"></td>
<td width="80">籍贯</td>
<td width="200"></td>
<td width="120">政治面貌</td>
<td width="250"></td>
</tr>
<tr height="50">
<td width="100">身高</td>
<td width="200"></td>
<td width="80">体重</td>
<td width="200"></td>
<td width="120">身体状况</td>
<td width="250"></td>
</tr>
<tr height="50">
<td width="100">联系电话</td>
<td width="200"></td>
<td width="80">邮箱</td>
<td width="200"></td>
<td width="120">现所在地</td>
<td width="250"></td>
</tr>
<tr height="50">
<td width="100">求职意向</td>
<td colspan="6"></td>
</tr>
<table align="center" border="1" cellspacing="0" cellpadding="0">

<tr height="50">
<td width="60" rowspan="3">教<br />育<br />背<br />景</td>
<td width="370">时间</td>
<td width="370">院校</td>
<td width="370">专业</td>
</tr>
<tr height="50">
<td width="370">20XX-XX</td>
<td width="370">武汉科技大学</td>
<td width="370">XX（本科）</td>
</tr>
<tr height="120">
<td align="left" rowspan="2" colspan="3">主修课程</td>
</tr>
</table>
</table>

</body>

</html>


想做成的样子和现有的样子：

 

答 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        td {
            text-align: center;
        }
        td{
            box-sizing: border-box;
        }
    </style>
</head>


<body>
    <table align="center" border="1" cellspacing="0" cellpadding="0" style="border-bottom: 0;">
        <tr height="50">
            <td width="60" rowspan="5">个<br />人<br />信<br />息</td>
            <td width="100">姓名</td>
            <td width="200"></td>
            <td width="80">性别</td>
            <td width="200"></td>
            <td width="120">出生年月</td>
            <td width="250"></td>
            <td width="160" rowspan="4">贴<br />照<br />片<br />处</td>
        </tr>
        <tr height="50">
            <td width="100">民族</td>
            <td width="200"></td>
            <td width="80">籍贯</td>
            <td width="200"></td>
            <td width="120">政治面貌</td>
            <td width="250"></td>
        </tr>
        <tr height="50">
            <td width="100">身高</td>
            <td width="200"></td>
            <td width="80">体重</td>
            <td width="200"></td>
            <td width="120">身体状况</td>
            <td width="250"></td>
        </tr>
        <tr height="50">
            <td width="100">联系电话</td>
            <td width="200"></td>
            <td width="80">邮箱</td>
            <td width="200"></td>
            <td width="120">现所在地</td>
            <td width="250"></td>
        </tr>
        <tr height="50">
            <td width="100">求职意向</td>
            <td colspan="6"></td>
        </tr>
        <table align="center" border="1" cellspacing="0" cellpadding="0">

            <tr height="50">
                <td width="60" rowspan="3">教<br />育<br />背<br />景</td>
                <td width="370">时间</td>
                <td width="370">院校</td>
                <td width="370">专业</td>
            </tr>
            <tr height="50">
                <td width="370">20XX-XX</td>
                <td width="370">武汉科技大学</td>
                <td width="370">XX（本科）</td>
            </tr>
            <tr height="120">
                <td align="left" rowspan="2" colspan="3">主修课程</td>
            </tr>
        </table>
    </table>

</body>

</html>

可以了

答 

<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			table {
				width: 100%;
			}
			#tab1 {
				border-bottom-width: 0px;
			}
			#tab2 {
				border-top-width: 0px;
			}
			td {
			text-align: center;
			}
		</style>
	</head>
	<body>
		<table id="tab1" align="center" border="1" cellspacing="0" cellpadding="0">
			<tr height="50">
				<td width="60" rowspan="5">个
					<br />人
					<br />信
					<br />息</td>
				<td width="100">姓名</td>
				<td width="200"></td>
				<td width="80">性别</td>
				<td width="200"></td>
				<td width="120">出生年月</td>
				<td width="250"></td>
				<td width="160" rowspan="4">贴
					<br />照
					<br />片
					<br />处</td>
			</tr>
			<tr height="50">
				<td width="100">民族</td>
				<td width="200"></td>
				<td width="80">籍贯</td>
				<td width="200"></td>
				<td width="120">政治面貌</td>
				<td width="250"></td>
			</tr>
			<tr height="50">
				<td width="100">身高</td>
				<td width="200"></td>
				<td width="80">体重</td>
				<td width="200"></td>
				<td width="120">身体状况</td>
				<td width="250"></td>
			</tr>
			<tr height="50">
				<td width="100">联系电话</td>
				<td width="200"></td>
				<td width="80">邮箱</td>
				<td width="200"></td>
				<td width="120">现所在地</td>
				<td width="250"></td>
			</tr>
			<tr height="50">
				<td width="100">求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>
		<table id="tab2" align="center" border="1" cellspacing="0" cellpadding="0">
			<tr height="50">
				<td width="60" rowspan="3">教
					<br />育
					<br />背
					<br />景</td>
				<td width="370">时间</td>
				<td width="370">院校</td>
				<td width="370">专业</td>
			</tr>
			<tr height="50">
				<td width="370">20XX-XX</td>
				<td width="370">武汉科技大学</td>
				<td width="370">XX（本科）</td>
			</tr>
			<tr height="120">
				<td align="left" rowspan="2" colspan="3">主修课程</td>
			</tr>
		</table>
	</body>

</html>

答

使用表格的嵌套，行列合并就能达到你要的效果

答

干嘛不写成一个table

答

 

答

 

答

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

相关推荐