Reduce HTML size but keep it similar

I have HTML like this:

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

There may be many, many lines.

There is nothing wrong with how it looks. However, this page accounts for more than 60% of the used bandwidth.

Is there a way to reduce the number of characters in this HTML by keeping it approximately the same?

If that matters, I use PHP on the page.

+1
source share
3 answers

Other answers already cover a simpler way and explain the situation well.

My answer reduces the number of characters in HTML to a (possibly) absolute minimum:

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> 

Readable 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 } 

To understand this, try to think of it as (single letter) <b> and <i> tags that have been modified to act as <div> tags through CSS.

If you have any questions about this technique, I will try to answer them for you.

-one
source

With any browser launched in the past 10 years (or even longer, IE6 is fine with the order below), you should be able to use CSS to remove all those width and align attributes, as well as width , border and cellpadding in the table. Depending on your browser support profile, you can also cut out cellspacing , but the rough equivalent - CSS border-spacing property is later and less well supported, so I'll leave it below.

For width and align in cells and width and cellpadding in a table:

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

For example, if you give the table a id , you can do something like this:

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> 

Real time example

... but it should not be id if there is another CSS selector that can identify the table by its location in the document, etc.

Refresh . If you use HTML5, you can also leave the closing tags </td> and </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> 

... and most browsers will correctly understand that even if you use doctype HTML4 (or nothing at all); more details: http://www.w3.org/TR/html5/syntax.html#optional-tags I am not a fan of this optional end tag, but many people.

+7
source

The most obvious solution is to use style sheets.

add to head

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

get rid of each attribute width and align , and in style.css put:

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

Ideally, all your styles will be in a css file, this is just a simple example.

+5
source

All Articles