Centering a column in a table

Question

I am trying to center just certain columns in a table but I am having issues. I know in the past you would just simply apply inline styles to each TD but there has to be a better way.

Here is a simple example:

.centerText{
 text-align:center;
}

    <table border="1">
      <col>
      <col class="centerText">
      <thead>
        <tr>
          <th>heading1</th>
          <th>heading2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
      </tbody>
    </table>

With that class I am trying to center the text inside. I know applying css to the col will work for changing background color for the column and text color and such, but I am not sure how I would use it to center a column. I am assuming because I need to center the contents of the td and this is probably just centering the TD element itself; which is already 100 percent. I understand I can just say apply the css to the 5th TD in this TR but that seems fragile.

Also, bonus points if you can show me how to change the width of a column this way. I used the width attribute for col but that is deprecated in html 5 (even though it is still currently supported.

`` doesn't support `class` attribute: http://stackoverflow.com/questions/9623601/how-to-use-class-attribute-in-html-col — Brandon Hill, Mar 17 '17 at 18:22

Marco Salerno · Answer 1 · 2017-03-17T18:25:22.150

1

Done, your class wasn't used anywhere

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

<table border="1">
  <thead>
    <tr>
      <th>heading1</th>
      <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td >2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

I removed:

  <col>
  <col class="centerText">

and

.centerText{
    text-align:center;
}

Because col doesn't mean anything and you didn't close the tags.

edited Mar 17 '17 at 18:25

answered Mar 17 '17 at 18:17

Marco Salerno

5,131
2
12
32

But that's how you center ALL the items, I just wanted to center the second column. In reality with my project I have 8 columns that will have a thousand entries and I need 3 of the columns centered.Also col does exist but maybe it has been deprecated into oblivion https://www.w3schools.com/tags/tag_col.asp – shellwe Mar 17 '17 at 18:22
"col doesn't mean anything" isn't quite true, you just can't use `class` :) – Brandon Hill Mar 17 '17 at 18:23
Done, you didn't say that you just needed the 2nd column, now it's ok ^^ – Marco Salerno Mar 17 '17 at 18:25

Bad Hombre · Answer 2 · 2017-03-17T18:25:10.667

0

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center
}

edited Mar 17 '17 at 18:25

answered Mar 17 '17 at 18:17

Bad Hombre

596
5
18

td {text-align:center;} – GavinBrelstaff Mar 17 '17 at 18:18
but I would have to add an align="center" to each row, wouldn't ? – shellwe Mar 17 '17 at 18:19

Ankit Singh · Answer 3 · 2017-03-17T18:32:02.667

0

If you want to align your all td content to the center

add the centerText class to your table

<table class="centerText" border="1">

edited Mar 17 '17 at 18:32

answered Mar 17 '17 at 18:24

Ankit Singh

1,477
1
13
22

Johannes · Answer 4 · 2017-03-17T19:04:04.287

0

It's not completely clear what you want, but if you want to center the contents of a certain column, you can just use this CSS rule:

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

In this example it applies to the second column, but you could define that for any column. It works since the td are always children of a tr, so you can use the nth-child selector.

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

<table border="1">
  <col>
  <col class="centerText">
  <thead>
    <tr>
      <th>heading1</th>
      <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

edited Mar 17 '17 at 19:04

answered Mar 17 '17 at 18:25

Johannes

64,305
18
73
130

what's the sense in copying an answer and repost it? :| – Marco Salerno Mar 17 '17 at 18:26
@MarcoSalerno BTW: I actually had read the first sentence of your answer (about the OP's class) and seen that as something different than what I had in mind (no class, just a selector) - so I didn't read on. That you actually used a selector and NO class I saw only after you commented. So we have the same code, but a different explanation... – Johannes Mar 17 '17 at 18:45

Centering a column in a table

4 Answers4