This question already has answers here:
How to center the contents of an HTML table?
(9 answers)
Closed 1 year ago.
I have created a simple table and want to align the td elements in center but align:center in css doesn't seem to work
.cTable td{
align:center;
}
<table border='1' id='mytable' class="cTable">
<tbody>
<tr><th>Claim ID</th><th>Status</th></tr>
<tr><td align="center">22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
</tbody>
</table>
It should be text-align, not align
https://developer.mozilla.org/en/CSS/text-align
What worked for me is the following (in view of the confusion in other answers):
<td style="text-align:center;">
<input type="radio" name="ageneral" value="male">
</td>
The proposed solution (text-align) works but must be used in a style attribute.
margin:auto; text-align, if this won't work - try adding display:block; and set there width:200px; (in case your TD is too small).
Give a style inside the <td> element or in your CSS file, like this: vertical-align: middle;
I personally didn't find any of these answers helpful. What worked in my case was giving the element float:none and position:relative. After that the element centered itself in the <td>.
The best way to center content in a table (for example <video> or <img>) is to do the following:
<table width="100%" border="0" cellspacing="0" cellpadding="100%">
<tr>
<td>Video Tag 1 Here</td>
<td>Video Tag 2 Here</td>
</tr>
</table>
Related
I have div, which has all content aligned to center:
<div align="center">
<table><tr><td>.....
But align is not more valid attribute. So, i have changed to class or style:
<div style="text-align:center;">
But it is not the same as before. Table is now aligned to left and not to center. Obvious text-align is not equivalent to old center attribute. How should i write style to achieve the same functionality as before with center attribute?
Just use margin: 0 auto on your table to center it.
See HERE
To align the table to center of the parent element of the table, just use:
table {
margin: 0 auto;
}
Also to align the table to center in respect of height of the parent element of table, you can give line-height same as height of the parent element.
As mentioned above in the comment you need to align the table
Add this to your CSS:
table.center {
margin-left:auto;
margin-right:auto;
}
And then add this to your table:
<table class="center">
...
</table>
Perhaps take a look here?
I've used that several times to vertically center content.
Then take a look at bootstrap. They have mix-ins that take care of the horizontal alignment (here).
Edit:
#mattytommo has a good answer for the horizontal alignment.
If you want to align table to center, use the following
<table align="center">
This will align your table to centre of div.
You can try this:-
div{
width:90%;
margin:0 auto;
text-align:center;
}
or
<div style="width:90%;margin:0 auto;text-align:center">
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
I have normal table, nothing special about it, here it is:
live example : http://jsfiddle.net/fFENK/1/
<table width="100%" border="1">
<tr>
<td rowspan="2">January</td>
<td colspan="2">$10s0</td>
</tr>
<tr>
<td>$100 <br/>$100 <br/>$100 <br/> </td>
<td>$540</td>
</tr>
</table>
The problem here is the text that got automatically centered along, as you can see in the live example I gave before, the text "January" is in the middle of the cell and not at the top of the cell like it suppose to be. How do i fix it?
Set the vertical-align property of the cell.
Add some css to your code:
td {
vertical-align:top;
}
Add valign attribute to <td> node:
<td rowspan="2" valign="top">January</td>
You should apply this css to make it get to the top
td { vertical-align: top }
When you create a basic HTML table everything seems to stay in center of the table. I don't want this how can i stop this from happening?
I wish to use a 2 column html table one for column for a sidebar one for content. Because i have so much content the sidebar text (which is little) gos to the middle of column.
How do i align the text to stay to the top left of the columns?
In the <td> element that contains the lefthand sidebar, try specifying a style that aligns text to the top:
<td style="vertical-align: top">(Sidebar HTML code here)</td>
You can control the alignment of columns directly in your markup by using:
<td style="text-align: left; vertical-align: top;"></td>
or even just
<td align="left"></td>
This will work fine for a 2-column table, but Piccolomomo has the better plan if you are going to use it a lot. This might help you further if you need it:
http://www.w3schools.com/html/html_tables.asp
You can use CSS to change text aligning inside your table:
td {
text-align: left;
vertical-align: top;
}
For aligning text in table you have to use css.Without css or any style sheet you can't make them align.So you can use inline css or external css for that.
<style type="text/css">
table td{
text-align:left;
vertical-align:top;
}
</style>
<table>
<tr valign="top">
<td align="left">
Side Bar
</td>
<td>
Content
</td>
</tr>
</table>
I have a table column like this, where I want to align an image and a text.
The text must be in the middle of the image.
<td><img height='50px' src='blabla'>Hello</td>
The above aligns the text at the bottom of the image.
I have also tried adding vertical-align:middle to the td style property, without luck.
I have also tried adding a <font> and styling that to vertical-align:middle without luck.
I know of one way, and that is adding another table column and having the text and image in separate columns, then it would be possible to align the text vertically in the middle, but I am trying to avoid this.
Any ideas?
You have to add the vertical-align to the img, not the td:
<td>
<img style="vertical-align: middle;" src="test.jpg"/>
test
</td>
To apply the style to all images in tds, use an external CSS:
td img {
vertical-align: middle;
}
Have you tried using valign="middle"
<td valign="middle"><img height='50px' src='blabla'>Hello</td>
Also, no need to add "px" to the height of the img.
Here you go:
<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>
http://jsfiddle.net/FDRy8/
use vertical-align:middle on the image and not the td
td img{
vertical-align:middle;
}
working example at http://www.jsfiddle.net/gaby/pPVtH/
Add vertical-align to the row as well, not just the cell.