本文介绍了如何使用HTML的表格标签来实现类似陕西理工大学首页的信息展示。通过分析目标页面，将首页分为6行并利用表格嵌套来布局。示例代码展示了如何插入图片和文字，并提供了简单的代码分析和效果展示。
四、 HTML-使用表格标签实现首页信息展示
(陕西理工大学版）
目标页面：
http://www.snut.edu.cn/
技术分析：
根据观察可将整个首页分为6行（不唯一），其中多行内再进行表格嵌套即可实现。
table，tr，t
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML表格练习之陕西理工大学首页信息</title>
</head>
<body>
<table border="0" width="100%" height="100%">
<tr>
<td colspan="2"><img src="img/4.jpg.png"></td>
</tr>
<tr>
<td align="center" height="60px" bgcolor="royalblue" width="100%" ><a href="#"><font face="宋体" color="white" size="4">网站首页 学校概况 教学单位 机构设置 人才培养 学术研究 招生就业 合作交流 校园生活</font></a></td>
</tr>
<tr>
<td><img alt="校园会议" src="img/2.jpg"></td>
</tr>
<tr>
<td align="center"><img src="img/5.jpg"></td>
</tr>
<tr>
<td align="center"><img src="img/3.jpg"></td>
</tr>
<tr>
<td><img src="img/6.jpg"/></td>
</tr>
</table>
</body>
</html>
代码分析
简单的使用table标签与其子标签实现图片汉字的插入，在此也可以使用嵌套的方式完成。
效果展示
备注：由于个人原因，本博客暂停更新。如有问题可联系本人，本人提供技术指导、学习方向、学习路线。本人微信wlp1156107728(添加注明来意) QQ1156107728(添加注明来意)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
