CODEWITHSUNDEEP
htmlcss
user15983184
user15983184

Reputation:

Table: align text by column

I want to align the text by column instead of target each cell by attribute of td because I need different columns to have different alignments. I've tried text-align: center; in the colgroup, but it's not working.

I found this topic How to center the contents of an HTML table?, but he uses the attribute of td, and it doesn't make sense if I have so many td. For example, It will bloat the HTML by putting an inline style to each td if I got 100 td.

What I want to accomplish is to make the text in columns 2 and 3 to be centered.

Below is the example code:

#tb {
    width: 100%;
  border-spacing: 0px;
}

#tb th,
#tb td {
  padding: 12px 0;
  line-height: 0.9;
}

#tb th {
  border-bottom: 1px solid #000;
  text-align: left;
}

#tb td {
  border-bottom: 1px solid #ddd;
}

#tb .tb-last-row {
    border-bottom: none;
}
<!DOCTYPE html>
<html>
<body>

<table id="tb">
  
   <colgroup>
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 10%; text-align: center;">
       <col span="1" style="width: 20%; text-align: center;">
    </colgroup>
  
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td class="tb-last-row">Jill</td>
    <td class="tb-last-row">Smith</td>
    <td class="tb-last-row">50</td>
  </tr>
</table>

</body>
</html>

Upvotes: 2

Views: 1496

Answers (2)

Ra&#250;l M
Ra&#250;l M

Reputation: 3

What you could do is to put an id or a class to the , for example:

<tr id="tr-id">
    <td></td>
</tr>

then select in your style sheet like this :

#tr-id td{
text-align:center
}

and that would be it.

Upvotes: 0

fubar
fubar

Reputation: 17398

You can use the :nth-child(n) CSS selector. This of course becomes a little more difficult if you were to have a cell with a colspan of more than one, but fortunately you don't.

#tb td:nth-child(1) // column 1
#tb td:nth-child(2) // column 2
#tb td:nth-child(3) // column 3


#tb {
    width: 100%;
  border-spacing: 0px;
}

#tb th,
#tb td {
  padding: 12px 0;
  line-height: 0.9;
}

#tb th {
  border-bottom: 1px solid #000;
  text-align: left;
}

#tb td {
  border-bottom: 1px solid #ddd;
}

#tb .tb-last-row {
    border-bottom: none;
}

#tb td:nth-child(1) {
  text-align: center;
}

#tb td:nth-child(2) {
  text-align: center;
}

#tb td:nth-child(3) {
  text-align: center;
}
<!DOCTYPE html>
<html>
<body>

<table id="tb">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td class="tb-last-row">Jill</td>
    <td class="tb-last-row">Smith</td>
    <td class="tb-last-row">50</td>
  </tr>
</table>

</body>
</html>

Upvotes: 3

Related Questions