课间活动的表格怎么实现，想了很久也想不出来

课间活动的表格怎么实现，想了很久也想不出来


http://img1.sycdn.imooc.com//climg/5b23b08d0001322210220410.jpg
感觉很难实现，是我想的方向错了嘛？
gum11 2018-06-15
源自：HTML表格   2-23 编程练习
60
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

30回答
qq_人_20 2018-09-05 21:00:44 
<!DOCTYPE html>
<html>

    <head>
		<title>表格属性</title>
		<meta charset="utf-8">
	</head>

	<body>
		<!-- 在以下表格标签中添加相应代码 -->
		<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
			<caption>课程表</caption>
			<tr bgcolor="orange" align="center">
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
			</tr>
			<tr align="center">
				<td rowspan="2">语文</td>
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
			<tr align="center">
			
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
			<tr align="center">
				<td  colspan="5">课间活动</td>
	
			</tr>
			<tr align="center">
				<td rowspan="2">
					<table border="1" frame="void">
					<tr>
							<td>前半节</td>
							<td>后半节</td>
					</tr>
					<tr>
							<td>诗词</td>
							<td>古文</td>
					</tr>
					</table>
				</td>
				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
			<tr align="center">

				<td>数学</td>
				<td>化学</td>
				<td>英语</td>
				<td>生物</td>
			</tr>
		</table>
	</body>
</html>


0
收起回答
落日的猪猪 2018-08-31 16:56:32

colspan="5"

0
收起回答
Walker游游 2018-08-26 16:31:48 
<tr align="center">
    <td colspan="4">课间活动</td>
    
   </tr>


0
收起回答
1122mrsdong 2018-08-23 14:56:48

colspan="5"

0
收起回答
慕慕3416675 2018-08-22 23:04:12

把第四个<tr></tr>,即第四行的第一列改成<td colspan="5"></td>,并且后面的<td></td>全删了

0
收起回答
小鱼0319zn 2018-08-20 18:37:15

0
收起回答
_是你_ 2018-08-20 18:28:01

               

test

0
收起回答
qq_鸭绿桥第一帅哥_0 2018-08-20 18:22:40

<table border="1" width="900" cellspacing="0" cellpadding="5px" align="center">

<caption>课程表</caption>

<tr bgcolor="orange" align="center">

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

</tr>

<tr align="center">

<td rowspan="2">语文</td>

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td colspan="5">课间活动</td>

</tr>

<tr align="center">

<td rowspan="2">

<table border="1" cellspacing="0">

<tr>

<td>前半节</td>

<td>后半节</td>

</tr>

<tr>

<td>诗词</td>

<td>古文</td>

</tr>

</table>

</td>

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

</table>


0
收起回答
你是我的河豚鱼 2018-08-10 23:00:31

建议你复习前面的表格合并的章节，自己能写出来的话，这个题目没难度吧

1
收起回答
以气御码 2018-08-09 17:18:57

还在慕课？一个“课件活动”占据了5个格子，所以多余的4个直接删掉，只留下1个并使用colspan=5来实现

原代码：

<tr align="center">
    <td>课间活动</td>
    <td>课间活动</td>
    <td>课间活动</td>
    <td>课间活动</td>
    <td>课间活动</td>
</tr>

实现：

<tr align="center">
    <td colspan="5">课间活动/td>
</tr>


1
收起回答
救世的程序员 2018-08-08 16:43:37 
<!DOCTYPE html>
<html>
<head>
	<title>课程表</title>
</head>
<body>
<table cellspacing="0" width="500px" border="1">
	<caption>课程表</caption>
	<thead>
		<tr>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="2">语文</td>
			<td>数学</td>
			<td>化学</td>
			<td>英语</td>
			<td>生物</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
			<td>数学</td>
		</tr>
		<tr>
			<td align="center" colspan="5">课间活动</td>
		</tr>
		<tr>
			<td rowspan="2">
				<table cellspacing="0" align="center" border="1">
					<tr>
						<td>前半节</td>
						<td>后半节</td>
					</tr>
					<tr>
						<td>诗词</td>
						<td>古文</td>
					</tr>
				</table>
			</td>
			<td>数学</td>
			<td>滑雪</td>
			<td>英语</td>
			<td>生物</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>滑雪</td>
			<td>英语</td>
			<td>生物</td>
		</tr>
	</tbody>
	<tfoot>
		
	</tfoot>
</table>
</body>
</html>


0
收起回答
Gabriel23 2018-08-05 16:32:33

<td colspan = "5">课间活动</td>

0
收起回答
sunshine_mtt 2018-07-31 15:00:48

<!DOCTYPE html>

<html>


    <head>

<title>表格属性</title>

<meta charset="utf-8">

</head>


<body>

<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">

<caption>课程表</caption>

<tr bgcolor="orange" align="center">

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

</tr>

<tr align="center">

<td rowspan="2">语文</td>

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td colspan="5">课间活动</td>

</tr>

<tr align="center">

<td rowspan="2">

<table border="1" cellspacing="0">

    <tr>

        <td>前半节</td>

        <td>后关节</td>

    </tr>

    <tr>

        <td>诗词</td>

        <td>古文</td>

    </tr>

</table>

</td>

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td>数学</td>

<td>化学</td>

<td>英语</td>

<td>生物</td>

</tr>

</table>

</body>

</html>


0
收起回答
一昭 2018-07-29 15:23:43

如果是3*3的表：

添加一行：所有列会增加增加一个单元格（在<tr>下面在加一个<tr>就行，就变成4*3，这个简单）

添加一列：所有行会增加一个单元格（在每个<tr>里面增加一个<td>就是3*4了）

合并跨行单元：最开始发起跨行的<td>会+1，会吧下面的单元格挤出去，所以把其他<tr>的<td>删除就行。


0
收起回答
妮可妮可妮_ 2018-07-29 12:52:56

colspan 属性规定单元格可横跨的列数。

rowspan 属性规定单元格可横跨的行数。

可以使用这两个属性来完成表格,下面已经有同学做出来了哦~同学可以参考一下,动动手自己实现效果,加油~

0
收起回答
qq_夜游人_0 2018-07-28 14:37:00

<td colspan="5"></td>

0
收起回答
qq_马儿想带你去看风中的世界_0 2018-07-27 17:28:11

我猜你是行和列混淆了吧 多多练习  很简单的  实在不懂就多看两遍课程

0
收起回答
慕虎5538247 2018-07-24 15:14:42

你在课间活动那一行只写

<tr align="center">

        <td colspan="4">课间活动</td>

</tr>

就可以了 多余的三条删除掉

colspan实现单元格之间的合并

0
收起回答
桃花魂归何处 2018-07-23 21:04:18

<tr align="center">

<td colspan="4">课间活动</td>


</tr>

用colspan来实现列合并

0
收起回答
慕斯2218915 2018-07-18 13:14:11

<!DOCTYPE html>

<html>


    <head>

<title>表格属性</title>

<meta charset="utf-8">

</head>


<body>

<!-- 在以下表格标签中添加相应代码 -->

<table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">

<caption>课程表</caption>

<tr bgcolor="orange" align="center">

<th>星期一</th>

<th>星期二</th>

<th>星期四</th>

<th>星期五</th>

</tr>

<tr align="center">

<td>语文</td>

<td>数学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td>语文</td>

<td>数学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td colspan="4">课间活动</td>

</tr>

<tr align="center">

<td rowspan="2">

    <table border="1">

        <tr>

            <td>前半节</td>

            <td>后半节</td>

        </tr>

        <tr>

            <td>诗句</td>

            <td>古文</td>

        </tr>

    </table>

</td>

<td>数学</td>

<td>英语</td>

<td>生物</td>

</tr>

<tr align="center">

<td>数学</td>

<td>英语</td>

<td>生物</td>

</tr>

</table>

</body>

</html>


0
收起回答
首页上一页12下一页尾页
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

表格中的“课间活动”为什么不是一行显示，而是分了两行？
21 0 10
表格嵌套可以达到表格合并的效果吗？
5 0 3
老师我想问一下我的截图中的日期是怎样做出来的？
10 1 3
现在遇到一个很现实的问题
47 4 4
我这个表格太长了，有什么方法可以显示滚动条，滑动查看溢出的部分
1 0 5

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师