HTML表格的基本布局

最新推荐文章于 2024-04-26 15:36:17 发布

wj18740503137

最新推荐文章于 2024-04-26 15:36:17 发布

阅读量1.0k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/wj18740503137/article/details/108833154

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格布局</title>
	</head>
	<body>
		<table width="600" align="center" height="50" border="1" cellpadding="10" cellspacing="5" rules="all">
			<caption align="bottom" align="center">学生成绩表</caption>
			<tr bgcolor="blue">
				<th>班级</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>计科一班</td>
				<td>张三</td>
				<td>男</td>
				<td>23</td>
				<td>90</td>
			</tr>
			<tr>
				<td>计科二班</td>
				<td>李四</td>
				<td>女</td>
				<td>245</td>
				<td>80</td>
			</tr>
			<tr>
				<td>计科三班</td>
				<td>孙乾</td>
				<td>男</td>
				<td>28</td>
				<td>70</td>
			</tr>
			<tr>
				<td>计科四班</td>
				<td>钱八</td>
				<td>男</td>
				<td>21</td>
				<td>60</td>
			</tr>
			<tr>
				<td>计科五班</td>
				<td>王五</td>
				<td>女</td>
				<td>26</td>
				<td>50</td>
			</tr>
<div topmargin="0" leftmargin="0">  <!-- 表格整体对齐方式 --><!-- rowspan="2" colspan="2"表格行和列所占单元格 -->
		</table>

运行结果如下：

表格的页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的页面布局</title>
	</head>
	<body>
		<!-- 表格格式<table>  <caption>表名</caption> <tr><th></th></tr><tr><td></td></tr></table>
				每行每个<tr></tr>  表头<th></th> 表内容<td></td>rowspan="2" 行数 colspan="2"列数valign=""垂直对齐   cellpadding="10" cellspacing="5"单元格与单元格之间的距离-->
						
	<table  width="960"height="600"  cellpadding="0"cellspacing="0" border="0" align="">
			<!-- 	cellpadding和cellspacing边框距离   -->
		<tr align="center" height="100" bgcolor="red"> 
			<td> <font size="6px"><strong>表格顶部</strong></font></td>
		</tr>
		<tr>
			<td>
	<table height="400" align="left" width="30%" bgcolor="bisque">
		<tr align="center">
			<td><font  size="3" color="blue" face="隶书"><b>中间左部</b></font></td>
		</tr>
	</table>
	<table align="left" height="400" width="70%" bgcolor="cornflowerblue">
		<tr align="center">
			<td><font size="3" color="blue" face="隶书"><b>中间右部</b></font></td>
		</tr>
	</table>
		    </td>
		<tr>
		<tr align="center" height="100" bgcolor="red">
			<td> <font color="white" size="6"><strong>表格底部</strong></font> </td>
		</tr>
    </table>
	</body>
</html>

运行结果如下：

wj18740503137

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML表格的基本布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格布局</title> </head> <body> <table width="600" align="center" height="50" border="1" cellpadding="10" cellspacing="5" rules="all"> .
复制链接

扫一扫