Html 3 表格，

最新推荐文章于 2023-08-15 09:01:14 发布

漫步星河

最新推荐文章于 2023-08-15 09:01:14 发布

阅读量173

点赞数

分类专栏： Html 语法

本文链接：https://blog.csdn.net/u011644138/article/details/106877222

版权

Html 语法专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 创建表格

border:外边框 align=表示表的格式居中左右等 valign=表示表的格式居中上下可以两个合起来用 bgcolor 表示表格的背景颜色 cellspacing 表示表格内格子之间的间距

cellpadding表示单元格内部的间距。

<!DOCTYPE html>                                
<html>
    <head>
        <title>我是标题</title>
        <meta http-equiv="content=Type" content="text/html;charset=utf-8"/>    
 <br/>        
    </head>
    <body>
<table border="10px" width="500px" height="400px" align="center" bgcolor=#f0f0f0 cellspacing="-1x" cellpadding="10px">
<tr height="200px" align="right" valign ="bottom"> 
    <td height="200px" bgcolor="#FFC0CB" align="right">我是内容</td>
    <td>我是内容</td>
    <td>我是内容</td>
    <td>我是内容</td>
</tr>
<tr> 
    <td>我是内容</td>
    <td>我是内容</td>
    <td>我是内容</td>
    <td>我是内容</td>
</tr>
<tr> 
    <td>我是内容</td>
    <td>我是内容</td>
    <td>我是内容</td>
    <td>我是内容</td>
</tr>
</table>
    </body> 
</html>

表格合并 colspan =“2” 表示合并两列被合并的要删除

表格合并 rowspan=“2” 表示合并两行被合并的要删除

表格中可以嵌套表格。百分比宽高。最好嵌套少用。

标题 <caption>表格的标题</caption>

2. 表格实战，整体布局控制。

<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2312 -->
</head>
<body>
<table width="100%" bgcolor="#eeeeee">
<tr bgcolor="#242424" height="70px" cellspacing="0" cellpadding="0">
	<td>
		<table width="100%" height="100%"><tr height="100%" align="center">
		<td width="100px"><Img src="Img/logo.png" height="50px"/></td>
		<td width="70px"><font size="2" color="#DDDDDD">首页</font></td>
		<td width="70px"><font size="2" color="#DDDDDD">全部课程</font></td>
		<td width="70px"><font size="2" color="#DDDDDD">Unity</font></td>
		<td width="70px"><font size="2" color="#DDDDDD">Unreal</font></td>
		<td width="70px"><font size="2" color="#DDDDDD">关于我们</font></td>
		
		<td></td>
		<td width="70px"><font size="2" color="#DDDDDD">登录</font></td>
		<td width="70px"><font size="2" color="#DDDDDD">注册</font></td>
		</tr></table>
	</td>
</tr>
<tr>
	<td>
	<table width="1000px" align="center"><tr><td><font size="2">首页&nbsp;&nbsp;/&nbsp;&nbsp;JavaEE&nbsp;&nbsp;/&nbsp;&nbsp;Java编程学习第四季&nbsp;&nbsp;/&nbsp;&nbsp;默认教学计划</font></td></tr></table>
	</td>
</tr>
<tr>
	<td>
	<table width="1000px" align="center">
		<tr height="100px" bgcolor="white"><td colspan="3" align="center">已完成 0 / 58 任务学习有效期永久有效</td>
		</tr>
		<tr height="15px"><td colspan="3"></td></tr>
		<tr height="700px"><td width="600px" bgcolor="white">
		
		<ul>
		<li>101-课程简介</li>
		<li>102-代码执行的先后顺序</li>
		<li>103-断点调试（单步执行程序）</li>
		<li>104-进程和线程是什么</li>
		<li>105-创建线程的第一种方法</li>
		<li>106-CPU是如何处理多线程的运行的</li>
		<li>107-线程调度规则</li>
		<li>108-设置优先级（抢占式调度规则）</li>
		<li>109-多个线程的开启和名字设置</li>
		<li>110-线程的各种设置</li>
		<li>111-线程的生命周期</li>
		<li>112-实现Runnable接口（创建线程第二种方式）</li>
		<li>113-两种创建多线程的区别</li>
		<li>114-匿名内部类创建线程</li>
		<li>115-使用Thread实现卖票</li>
		<li>116-使用Runnable实现卖票</li>
		</ul>

		
		</td><td width="20px"></td><td width="280px" bgcolor="white"></td></tr>
		<tr><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td></tr>
	</table>
	</td>
</tr>
<tr>
	<td>4</td>
</tr>
<tr height="200px" bgcolor="#000000" align="center">
	<td>
	<font size="2" color="#DDDDDD">课程存档</font><br/><br/>
<font size="2" color="#DDDDDD">课程内容版权均归 SiKi学院 所有 京ICP备16046985号</font>
</td>
</tr>
</table>
</body>
</html>