Learn to Design HTML Tables with Less Code
Learning to design HTML tables with less code will
- reduce your file size
- make the web page load faster
- make the web page easier to read for the search engine bots and those visitors who use assistive technology to read web pages.
Design HTML Tables Using the Miminal Amount of HTML Coding
As a beginner starting off in HTML coding you are very tempted to design HTML tables when creating web pages. Having not learned the ins and outs of CSS (Cascading Style Sheets) the HTML table seems to be the only way to have the web page render the way it was intended.
Say you have some data and you want it presented in a HTML table as follows:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 1-1 | Data 2-1 | |
| Data 1-2 | ||
| Data 1-3 | ||
The HTML table code for the above:
<table border="0" width="100%"
cellspacing="0" cellpadding="0" summary="Subject
of table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1-1</td>
<td>Data 2-1</td>
<td> </td>
</tr>
<tr>
<td>Data 1-2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Data 1-3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
The above is a very simplified version of the coding a typical WYSWYG HTML editor would create when you click the insert table button or feature.
As of HTML 4.01, all presentation attributes (e.g. border, background color etc.) are to be within your stylesheet. This means, if you want to learn to code tables in strict compliance with the HTML 4.01 specification, all the widths, background colors, borders, etc. would be moved from the table coding in the HTML document to a stylesheet. Learning this technique now will also make your tables ready for future coding specifications and reduce the file size.
Design HTML Table Using Less HTML Code
Design HTML tables using colspan and rowspan to conserve coding and HTML file size. The same HTML table code using colspan and rowspan:
<table width="100%" border="0"
cellspacing="0" cellpadding="0" summary="Subject
of table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1-1</td>
<td>Data 2-1</td>
<td rowspan="3"> </td>
</tr>
<tr>
<td>Data 1-2</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td>Data 1-3</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
The first HTML table code example uses 419 characters (not counting spaces). The second example uses 377 characters (not counting spaces). That's a 10.02% saving of HTML table code in just this little table! Now multiple that by the number of tables you have in the web page and you have saved a ton of file size for the important stuff, content!
Design HTML tables using colspan and rowspan to reduce the HTML file size. The smaller the file size, the quicker the web page will render. Also, there will be less code for the search engine spider to process.
More HTML Table Articles
- HTML Tables and Search Engine Optimization How search engines read html tables and how to properly use tables from a search engine optimization point of view.
- Space Out HTML Source Code It is so much easier to look at your HTML source code if you space out your HTML code, putting each part of the HTML code on a separate line.
- Flexible Design (Liquid Design) Using a flexible design (also known as liquid design) accommodates a variety of browsers, screen resolutions, operating systems and monitors.
- Improving Download Speed Improving download speed of webpages is important to the success of a website. Internet users are impatient with slow websites and will move on if the webpage takes too long to render (also known as download).
If you found this web page a useful resource for your own website please link as follows:
Learn to Design HTML Tables with Less Code. When
starting off in HTML coding beginners are very tempted to design HTML
tables when creating web pages. Learn how to use rowspan and colspan..
URL:
