1、标签
HTML中表格主要由以下几个标签组成，以及它们的一些常用属性：
1.1 table：定义表格
-
border：设置表格边框的宽度。 -
width：设置表格的宽度。 -
height：设置表格的高度。 -
align：设置表格在页面中的水平对齐方式（left, center, right）。 -
cellspacing：设置单元格之间的空间。 -
cellpadding：设置单元格内容与边框之间的空间。 -
bgcolor：设置表格的背景颜色。 -
background：设置表格的背景图像。
1.2<caption>：定义表格标题
-
align：设置标题相对于表格的对齐方式。
1.3<tr>：定义表格的行
-
align：设置行内单元格内容的水平对齐方式。 -
valign：设置行内单元格内容的垂直对齐方式。 -
bgcolor：设置行的背景颜色。
1.4<th>：定义表格的表头单元格
-
align：设置内容的水平对齐方式。 -
valign：设置内容的垂直对齐方式。 -
colspan：设置单元格横跨的列数。 -
rowspan：设置单元格横跨的行数。 -
bgcolor：设置单元格的背景颜色。
1.5<td>：定义表格的单元格
-
align：设置内容的水平对齐方式。 -
valign：设置内容的垂直对齐方式。 -
colspan：设置单元格横跨的列数。 -
rowspan：设置单元格横跨的行数。 -
bgcolor：设置单元格的背景颜色。
<table border="1"> <caption>我的表格</caption> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table>
效果展示
2、实操作业
2.1 目标
灵感来自于 牢九门
2.2 方法步骤
利用截屏工具将整张图分为9个游戏英雄的头像
再分别介绍各个英雄
融入他们的高然台词
后期还可以插入超链接 链接到他们巅峰时刻的视频
2.3 代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" aligh="center" cellspacing="0" cellpadding="9" > <tr bgcolor="8B949E" align="center"> <td width="100">牢九门</td> <td width="120">图片</td> <td width="100">名称</td> <td width="250">超必杀</td> </tr> <tr align="center"> <td rowspan="3">上三门</td> <td><img src="素材\杨戬.png" alt="杨戬" width="100" height="100"></td> <td>杨戬</td> <td><ul> <ol>张开第三只眼！</ol> <ol> 开！ </ol> </ul> </td> </tr> <tr align="center"> <td><img src=素材\司空震.jpg alt="" width="100" height="100"> </td> <td>司空震</td> <td>我就是天帝!</td> </tr> <tr align="center"> <td><img src=素材\蒙恬.jpg alt="" width="100" height="100"> </td> <td>蒙恬</td> <td>士以进死为荣，退生为辱。</td> </tr> <tr align="center"> <td rowspan="3">中三门</td> <td><img src=素材\吕布.jpg alt="" width="100" height="100"></td> <td>吕布</td> <td> 连鬼神也杀给你看！</td> </tr> <tr align="center"> <td><img src=素材\李信.png alt="" width="100" height="100"></td> <td>李信</td> <td>一念通天，神魔无惧。</td> </tr> <tr align="center"> <td><img src=素材\元歌.png alt="" width="100" height="100"></td> <td>元歌</td> <td>生得渺小，死得精彩</td> </tr> <tr align="center"> <td rowspan="3">下三门</td> <td><img src=素材\关羽.png alt="" width="100" height="100"></td> <td>关羽</td> <td>向那位顽抗的公主致敬!</td> </tr> <tr align="center"> <td><img src=素材\达摩.png alt="" width="100" height="100"></td> <td>达摩</td> <td>迎接我的狮子之牙吧!</td> </tr> <tr align="center"> <td><img src="素材\夏洛特.jpg" alt="" width="100" height="100"></td> <td>夏洛特</td> <td>あなたごときに止められない！</td> </tr> </table> </body> </html>
2.4 效果展示
3、后续优化
-
网页背景单一 可以插入王者荣耀元素的背景
-
缺少交互 可以插入超链接来美化
-
有点单调 还没学 Css 期望未来通过Css使网页更好
4、基本信息
记于2024年12月11日
三叶灵泽
