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.
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;
}
Try with this
#tableId td
{
text-align:center;
vertical-align: middle;
}
OR just
td {
text-align:center;
vertical-align: middle;
}
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.
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
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>
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.
Related
I want to place two HTML tables besides each other, having one centered in the webpage and the other one centered within the right margin of the of the first table.
myTable is supposed to be centered and keypadTable is a smaller table in the right margin of myTable
Currently, myTable is not at the centre of the overall webpage and keypadTable is just floating as expected
Right now:
[ (center) (right)]
What I want:
(eg. (center) is 9space from each "[]" and (right) is 1space from (centre) and closing bracket
[ (center) (right) ]
<table id="keypadTable" style="float: right;width: 300px; height:
341px; background-color: rgb(204, 204, 204);" border="1" cellpadding="5" cellspacing="5">
<tbody align="center"> </tbody>
</table>
<table id="mytable" style="float:center; text-align: right; width: 1014px; height:
341px; background-color: rgb(204, 204, 204); margin-left: auto; margin-right:auto;" border="1" cellpadding="5" cellspacing="5">
you want to use flex. create another invisible element the same size as your right table to get the spacing to work.
.flex {
display: flex;
justify-content: space-evenly;
}
.hidden {
visibility: hidden;
}
<div class="flex">
<table class='hidden'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
Style properties defined under one class affects the properties of another element with a different class definition.
Specifically the styles for the th and td from the Movement table are overwriting the ones defined in the Characteristics table. Inspecting the styles within Chrome it clearly shows that the Movement styles are trumping the Characteristic settings.
A working example of the code is below. It can run at this link from w3chools.com.
I've tried numerous variations and have been unable to correct it. Checked here and other sites for solutions but to no avail.
I'd really like to know what I'm doing wrong. Thanks.
.grid-container-0 {
display: grid;
grid-gap: 1px;
grid-template-columns: auto auto 5px auto;
width: 200mm;
border: solid black thin;
padding: 0px;
background-color: white;
}
.grid-container-2 {
display: grid;
grid-gap: 1px;
border: none;
padding: 2px;
background-color: white;
}
.grid-container-5 {
display: grid;
grid-gap: 1px;
border: none;
padding: 1px;
background-color: white;
}
.title {
padding: 2px;
text-align: left;
font-size: 12pt;
font-weight: bold;
color: white;
background-color: black;
}
div.characteristics {
grid-row: 2;
grid-column: 1 / span 2;
}
.characteristics th,
td {
padding: 2px;
text-align: center;
font-size: 10pt;
}
.characteristics th:last-of-type,
td:last-of-type {
text-align: left;
}
.characteristics tr:last-of-type {
font-weight: bold;
}
div.movement {
grid-row: 4;
grid-column: 2;
}
.movement th,
td {
margin: 0px;
padding: 0px 2px;
text-align: left;
font-size: 8pt;
}
<body>
<div class="grid-container-0">
<div class="grid-item characteristics">
<div class="grid-container-2">
<div class="grid-item characteristics-1 title">CHARACTERISTICS</div>
<div class="grid-item characteristics-2">
<table>
<tr>
<th>Val</th>
<th>Char</th>
<th>Points</th>
<th>Roll</th>
<th>Notes</th>
</tr>
<tr>
<td>10</td>
<td>STR</td>
<td>0</td>
<td>11-</td>
<td>HTH Damage 2d6 END [1]</td>
</tr>
<tr>
<td>10</td>
<td>DEX</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>CON</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>INT</td>
<td>0</td>
<td>11-</td>
<td>PER Roll 11-</td>
</tr>
<tr>
<td>10</td>
<td>EGO</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>PRE</td>
<td>0</td>
<td>11-</td>
<td>PRE Attack: 2d6</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td>3</td>
<td>OCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>DCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>OMCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>DMCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>SPD</td>
<td>0</td>
<td></td>
<td>Phases: 6, 12</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td>2</td>
<td>PD</td>
<td>0</td>
<td></td>
<td>2 PD (0 rPD)</td>
</tr>
<tr>
<td>2</td>
<td>ED</td>
<td>0</td>
<td></td>
<td>2 ED (0 rED)</td>
</tr>
<tr>
<td>4</td>
<td>REC</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>END</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>BODY</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>STUN</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>0</td>
<td>Total Characteristic Points</td>
</tr>
</table>
</div>
</div>
</div>
<div class="grid-item movement">
<div class="grid-container-5">
<div class="grid-item movement-1 title">MOVEMENT</div>
<div class="grid-item movement-2">
<table>
<tr>
<th>Type</th>
<th>Total</th>
</tr>
<tr>
<td>Run</td>
<td>12m[24m NC]</td>
</tr>
<tr>
<td>Swim</td>
<td>4m[8m NC]</td>
</tr>
<tr>
<td>H. Leap</td>
<td>4m</td>
</tr>
<tr>
<td>V. Leap</td>
<td>2m</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
When you write .characteristics th, td in your CSS, you're apparently expecting that to apply to .characteristics th and .characteristics td elements.
However, that isn't what it means: it actually applies to .characteristics th elements and all td elements. So that's why you're seeing styles intended for one class in places they shouldn't be.
Here's an example:
.red i, b {color:red}
.blue i, b {color:blue}
<div class="red">1 <i>2</i> <b>3</b></div>
<div class="blue">4 <i>5</i> <b>6</b></div>
You'd expect 2 and 3 to be red, and 5 and 6 to be blue, but that doesn't actually happen: both the color:red and color:blue rules apply to all b elements, so they'll end up the same color as each other (in this case, blue).
To fix this, .characteristics th, td has to be written as .characteristics th, .characteristics td (and likewise with other places where you've used commas).
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
How can I do this with CSS?
https://jsfiddle.net/ou8sdfLo/
I want to put an <img> inside a <tr> with a widh equal to its <tr>.
I hope it is clear enough.
I modified the image to match the code.
The image needs to be in a td, and if you want that td to span the entire width of the tr use the colspan attribute. Then if you want the img to fill the width of the td, use display: block; width: 100%;
table {
border-collapse: collapse;
}
tbody tr:hover {
background: #eee;
}
td:first-child {
text-align: left;
}
th {
background: #888;
color: white;
}
td,
th {
padding: 0.75em;
text-align: center;
}
img {
width: 100%;
display: block;
}
<table>
<tr>
<th>Model</th>
<th>Max speed</th>
<th>Power</th>
<th>Swept volume</th>
<th>Weight</th>
</tr>
<tr>
<td>Car 1</td>
<td>45 mph (72 km/h)</td>
<td>22 hp</td>
<td>2865 ccm</td>
<td>800 kg</td>
</tr>
<tr>
<td colspan="5"><img src="http://placehold.it/350x150" alt="car_preview"></td>
</tr>
<tr>
<td>Car 2</td>
<td>45 mph (72 km/h)</td>
<td>22 hp</td>
<td>2865 ccm</td>
<td>800 kg</td>
</tr>
</table
The only valid tag within a <tr> is <td>.
In the <img> row, you would need to set a colspan on your <td> equal to the total number of columns.
Like this:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
I want to create CSS-classes for the alignments of columns of tables.
I can achieve this by explicitly defining each class. Here is a complete working example:
<html>
<head>
<style>
table.s1l td:nth-child(1), table.s2l td:nth-child(2) {
text-align: left;
}
table.s1c td:nth-child(1), table.s2c td:nth-child(2) {
text-align: center;
}
table.s1r td:nth-child(1), table.s2r td:nth-child(2) {
text-align: right;
}
table.s5l td:nth-child(5) {
text-align: left;
}
</style>
</head>
<body>
<table class="s1c s2r">
<tr>
<td>center</td>
<td>right</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table style="text-align: center;" class="s5l">
<tr>
<td>center</td>
<td>center</td>
<td>center</td>
<td>center</td>
<td>column for comments comment (aligned left)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>Here is a comment</td>
</tr>
</table>
</body>
</html>
In the first table, for each column one class was asigned. In the second table all columns are centered, except the last one. Therefor the class s5l was used.
All this is part of a wiki, where users can define their tables and assign classes to the tables. Therefor it is unpredictable, which alignments for which columns are nessessary. So with this method, I am forced to define all classes explicitly for all the potential columns.
Is it possibile to create those class names implicitly instead of defining the classes for a high number of potential columns?
I want to propose this to an existing CSS-file, where no scripting is allowed, so only pure CSS may be used.
In the end it should look like this:
<html>
<head>
<style> # However the solution looks like
table.s[N]l td:nth-child([N]) {
text-align: left;
}
table.s[N]c td:nth-child([N]) {
text-align: center;
}
table.s[N]r td:nth-child([N]) {
text-align: right;
}
</style>
</head>
<body>
<table class="s1c s2r">
<tr>
<td>center</td>
<td>right</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table style="text-align: center;" class="s5l">
<tr>
<td>center</td>
<td>center</td>
<td>center</td>
<td>center</td>
<td>column for comments comment (aligned left)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>Here is a comment</td>
</tr>
</table>
</body>
</html>
So the classes s1c, s2r and s5l are created dynamically. And if, on another Wikipage, a user adds a big table with 11 columns and wants the last one centered, he simply adds the class s11c and it should work.
Try this:
.tab td:nth-child(1) {
text-align: left;
}
.tab td:nth-child(2) {
text-align: center;
}
.tab td:nth-child(3) {
text-align: right;
}