CODEWITHSUNDEEP
htmlcss
Anthony
Anthony

Reputation: 73

How can I center-align the text inside one column?

I am trying to center the <td> that contain numbers in them:

<tr>
    <td>October</td>
    <td align="center">1</td>
    <td>Cash</td>
    <td></td>
    <td>3</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>

I didn't want to do: 

<td align="center">3</td>

because I didn't want to have to add that in each individual cell. So I tried this: 

 <tr>
    <td>October</td>
    <td align="center">1</td>
    <td>Cash</td>
    <td></td>
    <div class="centered">
        <td>3</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </div>
 </tr>

and added these in my css: 

.centered {
    text-align: center; 
    align: center;
    float: center;
}

but they don't seem to work.

Upvotes: 4

Views: 14240

Answers (6)

Dan Sorensen
Dan Sorensen

Reputation: 11753

If it is always the same column(s), you can write your css rule like this:

/* Center 3rd column */
table td:nth-child(3) {
    text-align: center;
}

Or to center all but the 1st, 2nd, and 4th columns:

/* Center all columns */
table td {
    text-align: center;
}

/* Override rule above to left align specific columns */
table td:nth-child(1), table td:nth-child(2), table td:nth-child(4) {
    text-align: left;
}

/* Or simply apply 'text-left' class to desired td tags */
.text-left {
    text-align: left;
 }

Upvotes: 3

Momo6366
Momo6366

Reputation: 21

You are not referencing to the class in your table.

Your HTML should look something like this:

See code snippet below

$(".cash table tbody tr td:first-child").addClass("non-centered");
.centered table,
td {
  text-align: center;
  border: 1px solid #eee
}

.non-centered {
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="cash">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="centered">
    <tr>
      <td>October</td>
      <td align="center">1</td>
      <td>Cash</td>
      <td>3</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>
</div>

This is obviously if you want everything after the first column to be center aligned.

Upvotes: 0

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3157

Add class to the table and apply style on the table data.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
table.table1 tbody tr td {
    text-align: center;
}
</style>
</head>
<body>

<table style="width:100%" class="table1">
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>

</body>
</html>

Upvotes: 0

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

There is no such thing as float: center

For horizontal alignment use text-align: center and for vertical use vertical-align: middle.

The problem with your code is that you have div inside table which is not valid html syntax. Put centered class directly to cell you want to center.

Hope that helps

Upvotes: 0

AKNair
AKNair

Reputation: 1587

Try this method:


<tr>
    <td>October</td>
    <td align="center">1</td>
    <td>Cash</td>
    <td></td>
    <table align="center">
    <tr><td>3</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td></tr>
    </table>
</tr>

Also: There float:center doesn't exist.

Upvotes: 0

Nitin Dhomse
Nitin Dhomse

Reputation: 2622

Try with this

#tableId td 
{
    text-align:center;
    vertical-align: middle;
}

OR just

td {
        text-align:center;
        vertical-align: middle;
   }

Upvotes: 0

Related Questions