panofish panofish - 7 days ago 7
CSS Question

Embedded html style not affecting table?

I am trying to use style to affect the spacing of cells in my html table.
I am trying to use margin to make my cells have spacing on the right side only.
What am I doing wrong and how can I use style to affect cell spacing?

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
}

table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
}

td {
margin: 0px 20px 0px 0px;
color: #585858;
}

a {
color: #326ea1;
}
</style>

<title>Request</title>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> Request ID </td>
<td>516<br>
</td>
</tr>
<tr>
<td>Assigned<br>
</td>
<td>Fred Flintstone<br>
</td>
</tr>
<tr>
<td>Requestor<br>
</td>
<td>Bugs Bunny<br>
</td>
</tr>
<tr>
<td>Type<br>
</td>
<td>Construction<br>
</td>
</tr>
<tr>
<td>Location<br>
</td>
<td>Brazil<br>
</td>
</tr>
<tr>
<td> <br>
</td>
<td> <br>
</td>
</tr>
<tr>
<td style=" vertical-align: top;">Description</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br>
sed do eiusmod tempor incididunt ut labore et dolore <br>
magna aliqua. Ut enim ad minim veniam, quis nostrud <br>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
<tr>
<td><br>
</td>
<td><br>
</td>
</tr>
</tbody>
</table>

</body>
</html>

Answer

Unfortunately, table cells do not have a margin property, but you can probably set a padding on them to get the desired behaviour. W3Schools has a page on styling tables that might help you here: http://www.w3schools.com/css/css_table.asp

If you change your code to the following, it should work:

td {
 padding: 0px 20px 0px 0px;
 color: #585858;
}

You can also set a cellspacing attribute on the table. That will put space between the cell borders - however, this affects the spacing around all sides of the cells.