Change border Color and Size of HTML Tables

change border size and color in html tablesAfter having learnt the basics of creating HTML tables in blogspot blogs, its now time to learn how to customize the table cells border colors with more appealing look. We discussed in detail how to create columns and rows in HTML tables, but the problem with those defaults is that their original look comes with dull grey borders and it looks really odd. So we would use CSS to style the borders and cell edges of the table giving it a clean and neat look. If you want to see a demo again then click the link below,

Live Demo

Remove Borders From Table

The default code for a table with two rows and two colums looks like this,

<table border="1" cellspacing="0" cellpadding="2" width="400"><tbody>

<tr>
     <td>Row 1, Column 1</td>

      <td>Row 1, Column 2</td>
</tr>

<tr>
      <td>Row 2, Column 1</td>

      <td>Row 2, Column 2</td>
</tr>

</tbody></table>

Outcome:

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Now To turn those ugly borders into colorful borders of our choice, we will style the right, left, top and bottom borders in sequence and correct order. See how I changed border="1"  and also see with what code did I replaced each <td>. Now whenever you wish to create a table with neat borders then simply use the code below,

<table style="border:1px solid #ddd;" cellspacing="0" cellpadding="2" width="400"><tbody>

<tr>
      <td style="border-right:1px solid #ddd; border-bottom:1px solid #ddd;" >Row 1, Column 1</td>

      <td style="border-bottom: #ddd 1px solid; >Row 1, Column 2</td>
</tr>

<tr>
      <td style="border-right:1px solid #ddd;">Row 2, Column 1</td>

      <td>Row 2, Column 2</td>
</tr>

</tbody></table>

NOTE: To change border size, border colour and border style then simply edit 1px solid #ddd in each case. Where solid can be replaced by dashed or dotted border.

1 2
3 4

First a closed border is created round the entire table and then in each cell the borders are created logically. In the first cell which is Row 1, Column 1 we styled right and bottom border only. In the second (2) cell we styled only the bottom border and not others because they are already covered by table main border. In the third cell(3) we styled only the right border and not the bottom, left or top because they are already styled by neighboring lines. And in the fourth(4) cell we styled nothing because all its four borders are already style automatically due to neighboring border lines. I am sure I may be sounding a little confusing here but if you pay a little attention then you will really enjoy add more row and columns using the same technique.

For example if you add a bottom border to cell 1 and a top border to cell3, then the two borders will overlap creating a thicker border as shown below,

1 2
3 4

Look carefully at the thickness of the border between 1 and 3. That's why we keep good care of border ordering while styling them.

Need help?

Feel free to ask for any help if needed brothers. Would be a pleasure to reply as soon as possible. In my next post I would be focusing more on the background colors of the cells so stay tuned and subscribe now to remain updated.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

5 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. This comment has been removed by the author.

    ReplyDelete
  2. Hey bRO i am using ur monp template , Just a small help i want to add automatic read more with fixed image size and fixed no of words , How can i add it pls help me bro

    ReplyDelete
  3. very nice but i have one question what's the difference between using this code or using the table from windows live writer or either from Microsoft word?

    ReplyDelete
  4. @john
    Brother I would not recommend an automatic read more because the images do not look sharp and bright due to different sizes. Please read this post ->
    http://www.mybloggertricks.com/2011/06/10-ways-to-style-and-create-more-links.html
    <!--More-->
    and whenever you need to add the readmore link just add
    This is a shortcut.

    @Themex
    The only difference here is that you can use the above code to fully control the appearance of your tables which you can not using tables provided by WLW.

    ReplyDelete
  5. Salam, Please I need u to share how the width of tabs can be adjusted to avoid shooting out and how to create th styles for the tables u used in ur side gadgets, the most important is the tabs offshooting

    ReplyDelete