Menu
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).
My questions are:
<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>
561
To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated the border tag. Create table border using the CSS property border. Set table border as well as border for <th> and <td>.
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
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
