How to create dashed table border in HTML?

Have you realized by defining different style of table borders, programmers can also do the graphical design?

Basic table border

Code	Result
<table style="border:1px dotted black;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Outer table border only

Code	Result
<table style="border:1px dotted black;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Outer table dashed thick color border

Code	Result
<table style="border:3px dashed blue;"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

You may play with these parameters such as colors, thickness (in px) and dashed, dotted, double or solid.

Border Collapse

Code

Result

<table style="border:1px solid black;border-collapse:collapse;"> <tr> <th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th> </tr> <tr> <td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td> </tr> <tr> <td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

CSS classes style table

Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags --> <style type="text/css"> .myTable { background-color:#eee;border-collapse:collapse; } .myTable th { background-color:#000;color:white;width:50%; } .myTable td, .myTable th { padding:5px;border:1px solid #000; } </style> <!-- End Styles --> <table class="myTable"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

In fact, by defining cell background colors, such table style can be achieved by pure html. It saves some coding by using CSS and easier for further use. If you keep both css and html code in one post in blogspot, this table style will also show correctly. cool right.

CSS classes style display row line only

Code

Result

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags --> <style type="text/css"> .myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; } .myOtherTable th { background-color:#BDB76B;color:white;width:50%; } .myOtherTable td, .myOtherTable th { padding:5px;border:0; } .myOtherTable td { border-bottom:1px dotted #BDB76B; } </style> <!-- End Styles --> <table class="myOtherTable"> <tr> <th>Table Header</th><th>Table Header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> <tr> <td>Table cell 3</td><td>Table cell 4</td> </tr> </table>

Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

How do you feel like these table parameters now.