HTML: Design table with thin single line border

SingleLineBorder_2

In this quick tips, we will see a way to render an HTML table with single line(thin) border.

Generally when we write mark-up for HTML table with border specified, it renders as Fig. A which looks ugly with a very thick border. In Fig. A I have used markup starting with following line

 
<table border="1" cellpadding="0" cellspacing="0" width="200px">

Figure A & Figure B

Now, to have the HTML table to be rendered as Fig. B with thin border, we need to add style attribute with css property border-collapse set to collapse.

<table border="1" cellpadding="0" cellspacing="0" width="200px" style="border-collapse:collapse;">

I hope, it’s useful.

Advertisements

3 thoughts on “HTML: Design table with thin single line border

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s