减小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>

实例

...但它不必是一个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 doctype(或者根本没有); 详细信息:http://www.w3.org/TR/html5/syntax.html#optional-tags我不是这个可选结束标记的粉丝,但很多人都是.

Answer 2

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

在head添加

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

摆脱每一个 width,align属性,并在style.css中放置:

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

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