减小 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。根据您的浏览器支持配置文件，您也可以放弃 cellspacing，但粗略的等价物 - CSS 的 border-spacing 属性 - 是较新的且支持较少，因此我将在下面省略。

对于单元格上的width 和align，以及表格上的width 和cellpadding：

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

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

更新：如果您使用的是 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我不喜欢这种可选的结束标签，但很多人喜欢。

Answer 2

最明显的解决方法是使用样式表。

在head添加

<link rel="stylesheet" type="text/css" href="path/to/style.css" />

去掉every width 和 align 属性，并在 style.css 中放置：

td
{
  text-align: center;
  width: 25%;
}

理想情况下，所有样式都在 css 文件中，这只是一个简单的示例。

Answer 3

其他答案已经涵盖了更简单的方法，并且很好地解释了事情。

我的回答将 HTML 中的字符数减少到（可能）绝对最小值：

Live Demo

HTML：

<div id="words"><i>milk</i><b>blue</b><i>blind</i><b>perpetual</b><i>juice</i><i>jungle</i><i>cleaner</i><i>tiny</i><i>lemon</i><i>vitamin</i><b>unheard</b><i>empty</i><b>awesome</b><i>pink</i><i>grilled</i><i>mirror</i><b>hungry</b><i>opening</i><i>darkness</i><i>apply</i><i>burden</i><b>coaster</b><i>rocket</i><i>monster</i><i>rolled</i><i>lovers</i><b>plug</b><b>jumping</b><b>circus</b><i>bird</i><i>doctor</i><i>endless</i><b>golden</b><i>mutate</i><b>scream</b><i>chest</i></div>

可读的 HTML：

<div id="words">
    <i>milk</i>
    <b>blue</b>
    <i>blind</i>
    <b>perpetual</b>
    ... 
</div>

CSS：

#words {
    width: 600px;
    text-align: center;
    overflow: auto
}
#words i, #words b {
    display: block;
    float: left;
    width: 25%;
    padding: 3px 0;
    font-style: normal
}

要理解这一点，请尝试将其视为（一个字母）<b> 和 <i> 标记已通过 CSS 更改为类似于 <div> 标记。

如果您对此技术有任何疑问，我会尽力为您解答。