Shorten HTML for newbie [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
We have the following code that goes into a database field that with restricted number of characters.
<p class="Summary-heading"> Description</p>
<p> Outer: 100% Nylon</p>
<p> Body lining: 100% Polyester Micro fleece</p>
<p> Sleeve lining: 100% Polyester</p>
<p> Contrast panel jacket with piping</p>
<p> Concealed hood</p>
<p> </p>
<p class="Summary-heading"> Standard Decoration Area(s)</p>
<p> Front, back, chest (both sides)</p>
<p> </p>
<table width: 100%border="0" cellspacing="0" cellpadding="0" class="table_icons">
<tbody>
<tr>
<td style="width: 32px; padding-right: 5px; vertical-align: middle;"><img alt=""src="/Portals/0/i/embroidery.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle "><img alt=""src="/Portals/0/i/screenprint.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/heatapplieddecal.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/waterresistant.png" /></td>
<td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/windresistant.png" /></td>
</td>
</tr>
</tbody>
</table>
As a result I need to shorten the code. Any suggestions would be greatly appreciated.

Answer 1

Here's my take at shortening it, I don't think it can be condensed any further.
This goes into your stylesheet:
<style>
.table-icons {
width: 100%;
border: 0 none;
border-spacing: 0;
border-collapse: collapse;
}
.table-icons td {
width: 32px;
padding-right: 5px;
vertical-align: middle;
border: 0 none;
}
</style>
This into the database
<p class="summary-heading">Description</p>
<p>Outer: 100% Nylon</p>
<p>Body lining: 100% Polyester Micro fleece</p>
<p>Sleeve lining: 100% Polyester</p>
<p>Contrast panel jacket with piping</p>
<p>Concealed hood</p>
<p> </p>
<p class="summary-heading"> Standard Decoration Area(s)</p>
<p>Front, back, chest (both sides)</p>
<p> </p>
<table class="table-icons">
<tr>
<td><img src="/Portals/0/i/embroidery.png"></td>
<td><img src="/Portals/0/i/screenprint.png"></td>
<td><img src="/Portals/0/i/heatapplieddecal.png"></td>
<td><img src="/Portals/0/i/waterresistant.png"></td>
<td><img src="/Portals/0/i/windresistant.png"></td>
</tr>
</table>
If you still need it shorter, it would also help to shorten class names "table-icons" and "summary-heading".
Also, you can remove all the formatting tabs, they aren't necessary at all.

Answer 2

You can use CSS so that you don't need to give style every td. You can use class/id.
like
<style>
.tdClass{width: 32px; padding-right: 5px; vertical-align: middle;}
</style>
<td class="tdClass"></td>

Answer 3

Try moving your styles to a stylesheet which will save you a lot of time writing your code as well. It should look like this:
<p> Outer: 100% Nylon</p>
<p> Body lining: 100% Polyester Micro fleece</p>
<p> Sleeve lining: 100% Polyester</p>
<p> Contrast panel jacket with piping</p>
<p> Concealed hood</p>
<p> </p>
<p class="Summary-heading"> Standard Decoration Area(s)</p>
<p> Front, back, chest (both sides)</p>
<p> </p>
<table class="master-table">
<tbody>
<tr>
<td class="row"><img alt=""src="/Portals/0/i/embroidery.png" /></td>
<td class="row"><img alt=""src="/Portals/0/i/screenprint.png" /></td>
<td class="row"><img alt="" src="/Portals/0/i/heatapplieddecal.png" /></td>
<td class="row"><img alt="" src="/Portals/0/i/waterresistant.png" /></td>
<td class="row"><img alt="" src="/Portals/0/i/windresistant.png" /></td>
</tr>
</tbody>
</table>
With this style sheet
.master-table{
width: 100%;
border="0";
cellspacing="0";
cellpadding="0";
}
.row{
width: 32px;
padding-right: 5px;
vertical-align: middle;
}

Answer 4

Check out the new specifications regarding end tags. In HTML5 many elements don't need an end tag under certain circumstances.
Use an external css file. You repeat the same style code multiple times. Even if you want to let users customize some of the html input or if you want to customize posts in a blog it's always recommended to define standards in your css such as:
.standardTD { ... } You could even define multiple versions of this and make the user choose one in his code.
You can also create a whole class for a table so that you only have to add one class to the table and from this class on onward you can design all the content of your table.
.myTable td {width: 32px; padding-right: 5px; vertical-align: middle;}
The user only has to add this class to his <td>-Tag. Provide elements such as:
.left, .right, .vcenter, .center
For standard text-align. This saves additional length. Furthermore this helps to create a uniform look while supporting customization.
Use compression such as gzip in your db.
You can even use a html compression/minification tool. This however is only recommended if you don't want to change this code later on. (Makes it hard to read). You could even setup a system which does this automatically but that's a little bit advanced.