9

I'm writing a program which will produce an html file for displaying some data. I need all columns to be aligned, so I'm trying to use a single html table, but I want to have solid horizontal lines in between some of the rows to separate the data. Using border-top and border-bottom I've been able to get most of the way towards what I want, however the horizontal lines that this produces aren't solid (see image).

image from chrome broswer

My questions are:

  1. How can I get solid horiztonal lines between some of rows in my table
  2. Also, a minor query, is there a better way of getting a bit of space between the row labels in the left hand column and the data. Currently I'm specifying a blank column.
The html behind that image is as follows: 
<html>
<head>
    <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252">
    <style type="text/css">
        tr.border_top td {
            border-top:1pt solid black;
        }
        tr.border_bottom td {
            border-bottom:1pt solid black;
        }
    </style>
</head>
<body bgcolor=white><b>DATA</b></p>
<table>
    <col align="left"></col>
    <col width=20></col>
    <col align="right"></col>
    <col align="right"></col>
    <col align="right"></col>
    <col align="right"></col>
    <tr class="border_top">
        <td><b>XYZ1</b></td>
        <td></td>
        <td>2.120</td>
        <td><span style="color:blue">2.280</span></td>
        <td><span style="color:blue">2.810</span></td>
        <td>3.000</td>
    </tr>
    <tr class="border_bottom">
        <td><b>ABC1</b></td>
        <td></td>
        <td>1.370</td>
        <td><span style="color:blue">1.550</span></td>
        <td>1.690</td>
        <td><span style="color:blue">1.780</span></td>
    </tr>
    <tr>
        <td><b>XYZ2</b></td>
        <td></td>
        <td><span style="color:blue">1.900</span></td>
        <td>1.940</td>
        <td>2.050</td>
        <td><span style="color:blue">2.100</span></td>
    </tr>
    <tr class="border_bottom">
        <td><b>ABC2</b></td>
        <td></td>
        <td><span style="color:blue">1.910</span></td>
        <td>1.950</td>
        <td>2.060</td>
        <td><span style="color:blue">2.100</span></td>
    </tr>
</table>
</body>
</html>
Stochastically
  • 7,616
  • 5
  • 30
  • 58

2 Answers2

15

In the CSS add the remove the default border-spacing and add padding to the cells

table { border-spacing:0 }
td { padding:10px; }

JSFiddle Demo

Nick R
  • 7,704
  • 2
  • 22
  • 32
  • 2
    cellpadding and cellspacing are deprecated properties. – cimmanon Jun 21 '13 at 14:48
  • Thanks, that's helpful :-). But `td { padding:10px; }` seems to adds padding left, right, above and below. How can I just add padding to the left and right? – Stochastically Jun 21 '13 at 14:56
  • For left and right padding only, do `padding:0 10px`, that means `top` and `bottom` 0 and `left` and `right` get `10px` of padding. – Nick R Jun 21 '13 at 14:57
2

Give your table a class, for example mytable. Then in your CSS do:

.mytable {
 border-collapse: collapse;
}

.mytable td {
 padding: .2em;
}

The collapse makes the space between cells go away and therefore makes a continuous border, like you asked for. However, then all the texts are very close together, so a little padding on the cells makes it look nicer.

Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • Thanks, that's helpful :-). But `td { padding: .2em; }` seems to adds padding left, right, above and below. How can I just add padding to the left and right? – Stochastically Jun 21 '13 at 14:57
  • Like this: `td { padding: 0 .2em; }` Means: 0 for top and bottom, and .2em for left and right. – Bazzz Jun 21 '13 at 15:01
  • Thx vm for your help :-). I upvoted you, but the other guy got there first so I accepted his answer! – Stochastically Jun 21 '13 at 15:02
  • @Stochastically Cheers for that, I added my answer because Nick's initial answer was different (something with cellspacing and cellpadding) and I believed my answer to be better. Afterwards I think he changed his answer. Anyway, you should accept the answer that you have actually implemented in your project as therefore the acceptance on Stackoverflow represents real world best practice. – Bazzz Jun 22 '13 at 08:05