Creating a good looking HTML table sounds easy but when it comes to actual execution, it is not as easy as it seems. Consider the following most basic HTML textbook codes for a 3x3 HTML table:
|
<table border=1> <tr><td>Apple</td><td>Book</td><td>Car</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table> |
Here is how it looks:
This basic table looks unprofessional at the first glance. How about making it with less or thinner border?
|
<table border=0 cellspacing=0 cellpadding=0> <tr><td style="border:1px solid #aaa">Apple</td><td style="border:1px solid #aaa">Book</td><td style="border:1px solid #aaa">Car</td></tr> <tr><td style="border:1px solid #aaa">1</td><td style="border:1px solid #aaa">2</td><td style="border:1px solid #aaa">3</td></tr> <tr><td style="border:1px solid #aaa">4</td><td style="border:1px solid #aaa">5</td><td style="border:1px solid #aaa">6</td></tr> </table> |
Here it the screen capture of how it looks again:
By disabling the border for entire table and enabling border styling for each individual cell (highlighted in green), the border looks thinner now. But the problem now is the different thickness for the lines. The lines within the box seems thicker than those on the far out. This is due to the double border problem. Those with thicker line came from the neighboring cell borders. Now the next example will demonstrate how to eliminate the redundant lines using CSS:
|
<table border=0 cellspacing=0 cellpadding=0 style="border-collapse: collapse;"> <tr><td style="border:1px solid #aaa">Apple</td><td style="border:1px solid #aaa">Book</td><td style="border:1px solid #aaa">Car</td></tr> <tr><td style="border:1px solid #aaa">1</td><td style="border:1px solid #aaa">2</td><td style="border:1px solid #aaa">3</td></tr> <tr><td style="border:1px solid #aaa">4</td><td style="border:1px solid #aaa">5</td><td style="border:1px solid #aaa">6</td></tr> </table> |
Finally, this looks good:
Setting CSS border-collapse property to collapse now solved the problem. The problem now is the huge number of codes just for a simple 3x3 table. The codes will look complicated when it comes to large table. Now the CSS styling comes into play to simply the coding:
|
<html> <style type="text/css"> .s1 {font-family: arial; font-size: 13px; padding: 12px; border-collapse: collapse; } .s1 td { padding: 5px; border: 1px solid #aaa; text-align: center; } </style> <body> <table class=s1> <tr><td>Apple</td><td>Book</td><td>Car</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table> </body> </html> |
It now looks more prefessional:
Now the table looks much better. Please note that those in green are the extra CSS styles to apply spacing, alignment and font to the table. With these extra settings, the table looks even better! Now you have it, enjoy!
