How to define formatting for a multi-column table using classes?

Asked

Viewed 180 times

1

I made a website and inside the body has 6 columns with links and each column is within a class, kind of:

class="coluna 1"
class="coluna 2"
class="coluna 3"

What I want to know is whether this right this or I can do otherwise.

html

1 answer

2


It’s not wrong, but there are other ways to do this. For example using nth-child of the CSS. 

table {
  border-spacing: 0.5rem;
}
td {
  padding: 0.5rem;
}

td:nth-child(1) { background: hsl(150, 50%, 50%); }
td:nth-child(2) { background: hsl(160, 60%, 50%); }
td:nth-child(3) { background: hsl(170, 70%, 50%); }
td:nth-child(4) { background: hsl(180, 80%, 50%); }
td:nth-child(5) { background: hsl(190, 90%, 50%); }
td:nth-child(6) { background: hsl(200, 99%, 50%); }
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td> 
    <td>Market</td>
  </tr>
  <tr>
    <td colspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
    <tr>
    <td colspan="4">This</td>
    <td rowspan="3">Little</td>
    <td>Piggy</td>
  </tr>
  <tr>
    <td rowspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
  <tr>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
</table>

Source: http://codepen.io/chriscoyier/pen/fixJg

  • Vlw man, I’m gonna take a good look at this!

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.