Internet Handholding posted on August 03, 2010 10:59
To have a thin line as a border around the cells in your tables, using HTML, you need to use the BORDER, CELLPADDING and CELLSPACING attributes on your TABLE tag. By specifying 0 for CELLSPACING, you can avoid gaps between the cells.
<table border="1" cellpadding="3" cellspacing="0">
<tr><td>cell1</td><td>cell2</td></tr>
</table>
Here is CSS to create a table with a thin black border, padding and a background. This CSS also aligns the table heading with the text. I like this table for displaying general text information in columns.
table.infotable
{
background-color:#DDDDDD;
border:solid 1pt black;
border-collapse:collapse;
}
table.infotable td
{
border:solid 1pt black;
padding:.5em;
}
table.infotable th
{
border:solid 1pt black;
padding:.75em;
text-align:left;
}
Here is how you use this class in your web page.
<table class="infotable">
<tr><th>Head1</th><th>Head2</th></tr>
<tr><td>Cell1</td><td>Cell2</td></tr>
</table>
See this article for compatible CSS for highlighting inline text and using an information box to go along with your table.
You can find the W3 CSS table definitions here.
www.w3.org/TR/CSS2/tables.html
By Andrew Weitzen, Bronze Inc. (c) 2010
Bronze is the publisher of several online Internet journals including: InternetHandholding.com, DomainNames.gs, DotNetNuke.bz, Programmer.bz, Software.vg, WebHosting.vg