网页开发学习（二）：表格

最新推荐文章于 2024-09-03 03:48:57 发布

南木Sir

最新推荐文章于 2024-09-03 03:48:57 发布

阅读量433

点赞数 2

分类专栏：网页开发文章标签：网页开发

本文链接：https://blog.csdn.net/Godsolve/article/details/80753163

版权

网页开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

表格

表格所涉及的标签有“表格标签”，“行标签”和“单元格标签”。

< table >…< /table >：表格标签，表示一个表格的开始和结束。
< tr >…< /tr >：行标签，成对出现，包含在表格标签之间，有几对行标签就说明有该表格有几行。
< td >…< /td >：单元格标签，成对出现，包含在行标签之间，有几对单元格标签就说明有该表格有几个单元格。
< th >…< /th >：特殊单元格，表示该单元格为标题，即表头。

属性	说明
border	< table >标签的属性。border属性只允许使用值1或0，表示是否显示表格的边框
colspan	< td >属性的标签，表示跨多列，如colspan=3表示该单元格跨3列，即横向合并三个单元格
rowspan	< td >属性的标签，表示跨多行，作用同上

表格示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格应用</title>
</head>

<body>
	<table border="1">
	    <tr>
			<th colspan="5">学生登记表</th>
		</tr>
		<tr>
			<th>学号</th><th>姓名</th><th>年龄</th><th>专业</th><th>照片</th>
		</tr>
		<tr>
			<td>201303001</td><td>张小凡</td><td>18</td><td>软件开发</td>
			<td><!--<img src="file:///E:/HTML5/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%B5%8B%E8%AF%95/image/work1.jpg"/>--></td>
		</tr>
		<tr>
			<td>201303002</td><td>碧瑶</td><td>18</td><td>计算机科学与技术</td>
			<td><!--<img src="file:///E:/HTML5/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%B5%8B%E8%AF%95/image/work3.jpg"/>--></td>
		</tr>
		<tr>
			<td>201303003</td><td>卢一平</td><td>18</td><td>法学院</td>
			<td><!--<img src="file:///E:/HTML5/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%B5%8B%E8%AF%95/image/work4.jpg"/>--></td>
		</tr>
	</table>
</body>
</html>

预览结果如图：
这里写图片描述

这里可以使用img来放照片，不过要格外注意照片的格式，否则会出现照片和表格不相符的情况。

        <tr>
			<td>201303001</td><td>张小凡</td><td>18</td><td>软件开发</td>
			<td><img src="file:///E:/HTML5/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%B5%8B%E8%AF%95/image/work1.jpg"/></td>
		</tr>