如何用 html 语言格式来制作表格

本文链接：https://blog.youkuaiyun.com/qq_73801805/article/details/144411158

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>