CODEWITHSUNDEEP
htmlhtml-tablecellpadding
freediver
freediver

Reputation: 33

html5 compliant cellpadding in only some tables without editing td elements

Maybe I am being too picky. I want to put cell padding in some tables but not others, without editing every single td element. I would like to make it html5 compliant, which means not using the cellpadding property of the table. But I would like something equivalent to cellpadding - ie something I can apply to the properties of a whole table, on a table by table basis.

To make it even more complicated, I want collapsed borders, which I think rules out using the cell spacing property. Is there something tricky I can do there?

Upvotes: 3

Views: 74

Answers (2)

Maarten Bicknese
Maarten Bicknese

Reputation: 1558

You can solve these problems using CSS.

table.table-big td {
  padding: 10px;
}

table.table-collapse {
border-collapse: collapse;  
}

table td {
  border: 1px solid #333;
}
<table class="table-big table-collapse">
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

padding on the cell level can be used to create spacing between data and border.
border-collapse on the table can be used to collapse or separate borders.

You can create classes with these styles so you keep direct control on which table gets which styling. In my example the second table did not get any styling.

Upvotes: 0

Nikunj
Nikunj

Reputation: 26

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>

<body>
<p>Table without cellpadding:</p>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with cellpadding:</p>
<table cellpadding="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with css:</p>
<table class="cell-pad">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

Upvotes: 0

Related Questions