HTML的<table>标签基础 - HTML 表格

1.table标签的基本语法

<table>
   <tr>
      <td> </td>
      <td> </td>
   </tr>
   <tr>
      <td> </td>
      <td> </td>
   </tr>
</table>

这样就创建了一个 2×2 大小的表格，这些标签的意义分别为：

table：表格标签，用于创建一个表格。告诉编译器「我打算创建一个表格」——虽然...如果你只告诉它这个并不会有什么用处...

tr（table row）：表格行标签，用于定义一个表格的行，告诉编译器「创建一行表格」——虽然...如果你只告诉它这个和上面那个，依旧不会有什么用处...

没错，编译器就是跟小孩子一样任性，你要是不把东西说清楚，它根本就不会鸟你！虽然编译还是会通过，但没有任何用处，就跟「女朋友嘴上说不会生你的气，但依然会耍小任性」一样——虽然你不可能会有女朋友hhhhhhhh

咳咳，停止强行加戏，言归正传。

td（table data）：表格数据标签。用于向行内插入「格子」并给你一次「告诉编译器里面的内容是什么」的机会，如果你不告诉它——呃....我劝你还是告诉它比较好。相当于一个表格占位符。

以上三个标签就是创建一个表格必不可少的标签，另外还有些可选标签：

caption：表示表格的标题，这个标签会将表格的标题居中显示在表格的外顶部中央。

colgroup：表示表格的列组，这个标签可以为表格的列设置统一的样式。通常与<col>标签连用。

col：与<colgroup>标签连用以设置表格列的统一样式。

thead：表示表格的页眉。

tbody：表示表格的主体。

tfoot：表示表格的页脚。

以下是表格的实例的代码：

<table>
  <caption>表格标题：表格标签示例</caption>
  <colgroup>
    <col style="background-color:red;" />          <!-- 将第一列的背景设置为红色。 -->
    <col span="2" style="text-align:center;" />    <!-- 将第二列、第三列的字体排列方设置为“居中对齐”。 -->
  </colgroup>
  <tr>
    <th>表头-加粗显示</th>
    <th>表头-加粗显示</th>
    <th>表头-加粗显示</th>
  </tr>
  <tr>
    <td>表单数据 ｛0，0｝</td>
    <td>表单数据 ｛0，1｝</td>
    <td>表单数据 ｛0，2｝</td>
  </tr>
  <tr>
    <td>表单数据 ｛1，0｝</td>
    <td>表单数据 ｛1，1｝</td>
    <td>表单数据 ｛1，2｝</td>
  </tr>
  <tr>
    <td>表单数据 ｛2，0｝</td>
    <td>表单数据 ｛2，1｝</td>
    <td>表单数据 ｛2，2｝</td>
  </tr>
</table>

以上代码创建了一个表格，结果如下图所示

显然，默认的表格样式是没有边框的，这在很多情况下都不会采用这种没有边框的表格样式，那么就让我们给表格加上边框吧。只需要在<table>标签内设置 border 属性就可以了。如下所示：

<table border="1">

然后这个表格就变成了这样：

像这样的表格的确也没多好看，不过好处就是这些边框可以明确地将表单数据分开。

实例：「模仿」神奇宝贝第五世代招式列表（节选）

接下来就用这些标签来写一个「神奇宝贝第五世代招式列表」，由于招式实在是太多，这里偷懒只写前几个招式...[捂脸]

以下是效果图（颜色的选择可能有些出入，因为如果真的要让我一个一个对着找颜色的话...臣妾真的做不到啊！）：

代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {text-align:center;vertical-align:middle;}   <!-- 重新定义 table 标签的文字对齐方式，嗯...居中对齐，很常用，不是吗。-->
#topic {background-color:#FCF;}
#teshu {background-color:#00F;}
#bianhua {background-color:#999;}
#e {background-color:#300;}
#yanshi {background-color:#960;}
#chaoneng {background-color:#F06;}
#gang {background-color:#CCC;}
.font1 {font-weight:bold;color:#FFF;}
.font2 {font-weight:bold;color:#06F;}
</style>
</head>
<body>
<table border="3" bordercolor="#F9F" cellspacing="0" cellpadding="10" align="center">   <!-- 让表格在页面中居中显示；改变线框粗度和颜色； -->
  <caption>PokermonV 招式列表</caption>
  <tr id="topic">
    <th>编号</th>
    <th>技能名</th>
    <th>属性</th>
    <th>类型</th>
    <th>威力</th>
    <th>命中</th>
    <th>PP值</th>
    <th>说明</th>
  </tr>
  <tr>
    <td>468</td>
    <td>磨爪</td>
    <td id="e" class="font1">恶</td>
    <td id="bianhua" class="font1">变化</td>
    <td>--</td>
    <td>--</td>
    <td>15</td>
    <td>使自身攻击力和命中率提升一级</td>
  </tr>
  <tr>
    <td>469</td>
    <td>广域防守</td>
    <td id="yanshi" class="font1">岩石</td>
    <td id="bianhua" class="font1">变化</td>
    <td>--</td>
    <td>--</td>
    <td>10</td>
    <td>仅在本回合内，使我方全体不受群体攻击技能的打击。</td>
  </tr>
  <tr>
    <td>470</td>
    <td>防守平分</td>
    <td id="chaoneng" class="font1">超能</td>
    <td id="bianhua" class="font1">变化</td>
    <td>--</td>
    <td>--</td>
    <td>10</td>
    <td>将自身与目标的防御 / 特防相加后互相平分。</td>
  </tr>
  <tr>
    <td>471</td>
    <td>力量平分</td>
    <td id="chaoneng" class="font1">超能</td>
    <td id="bianhua" class="font1">变化</td>
    <td>--</td>
    <td>--</td>
    <td>10</td>
    <td>将自身与目标的攻击 / 特攻相加后互相平分。</td>
  </tr>
  <tr>
    <td>472</td>
    <td>奇妙空间</td>
    <td id="chaoneng" class="font1">超能</td>
    <td id="bianhua" class="font1">变化</td>
    <td>--</td>
    <td>--</td>
    <td>10</td>
    <td>制造奇妙空间，5回合内互换所有精灵的防御和特防。</td>
  </tr>
  <tr>
    <td>473</td>
    <td>精神冲击</td>
    <td id="chaoneng" class="font1">超能</td>
    <td id="teshu" class="font2">特殊</td>
    <td>80</td>
    <td>100</td>
    <td>10</td>
    <td>将念动力实体化攻击对手，给予物理伤害。</td>
  </tr>
  <tr>
    <td>474</td>
    <td>身体轻量化</td>
    <td id="gang" class="font1">钢</td>
    <td id="bianhua" class="font1">变化</td>
    <td>--</td>
    <td>--</td>
    <td>15</td>
    <td>削掉自己身体上没用的部分，大幅度提高速度，同时降低体重。</td>
  </tr>
</table>
</body>

以上代码涵盖了：

1.如何让表格中的文字居中显示；

2.如何让表格中的文字加粗并改变颜色；

3.如何改变表格框的背景颜色；
4.如何改变表格的线框颜色和粗度；

5.如何让表格在页面中居中显示；

2.向表格中插入图片、超链接等

嗯...这个应该不用说了吧，知道<a>标签和<img>标签的应该都会，直接写上去就可以了。只是在这里说一下可以这么做罢了。

算了，左思右想还是写一下吧。

<table border="1" align="center">
  <tr>
    <th>技能名称</th>
    <th>说明</th>
    <th>动画</th>
  </tr>
  <tr>
    <td>
      <a href="https://wiki.52poke.com/wiki/%E8%BA%AB%E4%BD%93%E8%BD%BB%E9%87%8F%E5%8C%96%EF%BC%88%E6%8B%9B%E5%BC%8F%EF%BC%89" target="_blank">身体轻量化</a>
    </td>
    <td>降低自身重量100Kg，同时速度上升2级。</td>
    <td>
      <img src="img/Autotomize.gif" />    <!-- 插入GIF格式动态图片。 -->
    </td>
  </tr>
</table>

以上代码的运行结果如下图所示：

PS：本篇博客的所有关于神奇宝贝的数据和资料均来自于「神奇宝贝百科」，对于数据的具体解释权归「神奇宝贝百科」所有。