html - 减少 HTML 的大小但保持它看起来相似

Question

我有这样的 HTML:

<table width="600" border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td width="25%" align="center">milk</td>
    <td width="25%" align="center"><b>blue</b></td>
    <td width="25%" align="center">blind</td>
    <td width="25%" align="center"><b>perpetual</b></td>
  </tr>
  <tr>
    <td width="25%" align="center">juice</td>
    <td width="25%" align="center">jungle</td>
    <td width="25%" align="center">cleaner</td>
    <td width="25%" align="center">tiny</td>
  </tr>
  <tr>
    <td width="25%" align="center">lemon</td>
    <td width="25%" align="center">vitamin</td>
    <td width="25%" align="center"><b>unheard</b></td>
    <td width="25%" align="center">empty</td>
  </tr>
  <tr>
    <td width="25%" align="center"><b>awesome</b></td>
    <td width="25%" align="center">pink</td>
    <td width="25%" align="center">grilled</td>
    <td width="25%" align="center">mirror</td>
  </tr>
  <tr>
    <td width="25%" align="center"><b>hungry</b></td>
    <td width="25%" align="center">opening</td>
    <td width="25%" align="center">darkness</td>
    <td width="25%" align="center">apply</td>
  </tr>
  <tr>
    <td width="25%" align="center">burden</td>
    <td width="25%" align="center"><b>coaster</b></td>
    <td width="25%" align="center">rocket</td>
    <td width="25%" align="center">monster</td>
  </tr>
  <tr>
    <td width="25%" align="center">rolled</td>
    <td width="25%" align="center">lovers</td>
    <td width="25%" align="center"><b>plug</b></td>
    <td width="25%" align="center"><b>jumping</b></td>
  </tr>
  <tr>
    <td width="25%" align="center"><b>circus</b></td>
    <td width="25%" align="center">bird</td>
    <td width="25%" align="center">doctor</td>
    <td width="25%" align="center">endless</td>
  </tr>
  <tr>
    <td width="25%" align="center"><b>golden</b></td>
    <td width="25%" align="center">mutate</td>
    <td width="25%" align="center"><b>scream</b></td>
    <td width="25%" align="center">chest</td>
  </tr>
</table>

可以有很多很多行。

这看起来没什么问题。但是，此页面占所用带宽的 60% 以上。

有没有办法减少这个 HTML 中的字符数，同时保持它看起来大致相同？

如果重要的话，我会在页面上使用 PHP。

Answer 1

在过去 10 年内发布的任何浏览器(甚至更长时间；IE6 都可以使用以下浏览器)，您应该能够使用 CSS放弃所有这些width和 align属性以及 width , border , 和 cellpadding在 table 上。根据您的浏览器支持配置文件，您可以放弃 cellspacing同样，但是粗略的等价物——CSS 的 border-spacing属性 — 较新且支持较少，因此我将在下面省略它。

对于 width和 align在细胞上，和width和 cellpadding在 table 上:

selector_for_the_table {
   width: 600px;
   border: none;
}
selector_for_the_table td {
   width: 25%;
   text-align: center;
   padding: 3px;
}

例如，如果您给表一个 id ，你可以这样做:

CSS:

#theTable {
   width: 600px;
   border: none;
}
#theTable td {
   width: 25%;
   text-align: center;
   padding: 3px;
}

HTML:

<table id='theTable' cellspacing="0">
  <tr>
    <td>milk</td>
    <td><b>blue</b></td>
    <td>blind</td>
    <td><b>perpetual</b></td>
  </tr>
  ...
</table>

Live example

...但它不一定是 id如果有另一个 CSS 选择器可以通过它在文档中的位置等来识别表格。

更新:如果您使用的是 HTML5，您也可以省略结尾 </td>和 </tr>标签:

<table id='theTable' cellspacing="0">
  <tr>
    <td>milk
    <td><b>blue</b>
    <td>blind
    <td><b>perpetual</b>
  <tr>
    <td>juice
    <td>jungle
    <td>cleaner
    <td>tiny
  ...
</table>

...即使您使用的是 HTML4 文档类型(或根本不使用)，大多数浏览器也会正确理解；详情:http://www.w3.org/TR/html5/syntax.html#optional-tags我不喜欢这种可选的结束标记，但很多人都喜欢。