CSS:
table.t_group tbody th
{
text-align: left;
}
table.t_group_matches tbody th
{
text-align: center;
}
HTML:
<table class="t_group">
<tbody>
<tr>
<td style="width:200px">123</td>
<td style="width:200px">456</td>
</tr>
</tbody>
<tfoot><tr><td colspan="2">
<table class="t_group_matches">
<tbody><tr>
<th>Some text to be centered</th>
</tr></tbody>
</table>
</td></tr></tfoot>
</table>
The pointed text is not centered...
Please advise, how to make it centered?
P.S. I could add style specification into tag itself (that works), but I don't like to move that 'stuff' out from css file.
P.P.S.
If that is essential, my 'doctype':
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
P.P.P.S.
If you know any new features (html5, css3) that could work please also advise.
The text is centered, just the table doesn't fill the width of its enclosing area:
table.t_group_matches {width:100%}
Related
I am trying to set similar style for all tds in an html table like below:
<table>
<tbody>
<tr>
<td style="text-align: right; direction: ltr;">1</td>
<td style="text-align: right; direction: ltr;">2</td>
<td style="text-align: right; direction: ltr;">3</td>
.
.
.
</tr>
</tbody>
</table>
Is there a way I can define the text within all these tds to be aligned right and directed to the left without the need of repeating the same for each cell? I know I can do this in a css file by somehow defining an Id or class, but is there a way I can do it within the same html file?
the following css will apply text align to all cells of all tables on your page. if you want it to be individually per table, set the table an ID or Class and apply the following code to it:
table td{
text-align: right;
}
to include it in the same html file, simply add it within a style block in your head section of the html:
<html>
<head>
<style type="text/css">
.MyTable td {
width:100px;
border:1px solid purple;
text-align: right !important; /*this attribute will be forced*/
direction: ltr;
}
</style>
</head>
<body>
<table class="MyTable">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
You can add class="right" to your <td> elements and then define the following CSS class:
.right {
text-align: right;
}
You can rename the class and/or add any other properties (like direction etc.).
If you wish to make this without any additional markups in your HTML code, you can create the following CSS class:
table td:nth-child(2) {
text-align: right;
}
This will align your 2nd column in your table to the right. If you wish to change the column number, just change the number in the parasintesis.
how to center the
I would like to center the text "Information". Tried the align="center" but didn't work
Is my code correct?
<table border="1" width="100%" cellspacing="10">
<tr>
<th>column1</th>
<th>column2</th>
<th bgcolor="#4F81BD"><strong><font size="5" color="white" face="calibri" align="center">Information</font><strong></th>
</tr>
</table>
[EDIT] Here is the code I have built thanks to your answsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
.centerText{
text-align: center;}
</style>
</head>
<table border="0" width="100%" cellspacing="10">
<tr>
<th></th>
<th></th>
<th class="centerText" bgcolor="#4F81BD"><strong><font size="5" color="white" face="calibri" >Information</font><strong></th>
</tr>
</table>
</body>
</html>
Is this the right way to handle this?
In your code you putting align="center" to the font tag inside of the strong. All of these elements are inline and doesn't fits all the cell width. To align it on center you need to put such attribute to the th tag or change displaying of the string and font tags to display:block to fit all the width.
The simplest way to do this is in CSS:
table tr th { text-align:center; }
P.S. Better way is to move all of your inline style to CSS files.
Use text-align:center;
see this live example on jsfiddle
[EDIT] Note that you should implement these styles within your CSS with classes or elements as pointed out by fellow users
Try using CSS.
table th {text-align:center;}
The <font> tag is deprecated and it's use is considered a very bad idea. Use CSS instead.
Using the <strong> tag just to get the text to be bold is also not particularly useful, especially inside a <th> element. The <th> already indicates that the text matters because it's the header of a table column. In many browsers, the text is already made bold in <th>s
The CSS style used to center the text is: text-align: center
Trying this
<th bgcolor="#4F81BD" align="center"><strong><font size="5" color="white" face="calibri" >Information</font><strong></th>
In Firefox, "C" is centered, due to the CSS blurb at the beginning. Why does IE7 left-justify it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
td {
text-align: center;
width: 130px;
}
</style>
</head>
<body>
<div style="width: 300px; background-color: #888">
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td colspan="2">C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That happens because you have width: 130px;. Try setting width only for the small cells, for example by:
td.span {
width:auto;
}
<td colspan="2" class="span">C</td>
See example: http://jsbin.com/etoka
You can also do it the other way around - giving a class to the small cells, the whole row, or best: setting the width of the <table>.
always use this for position a object in center in your page
this feature is worked in all popular browser like IE FF Safari Chrome Opera
<center> This is my centered text</center>
please give me vote if your problem is solved
I have a table inside a cell, and that table is "getting out" of the cell, as see in this screenshot:
alt text http://img.skitch.com/20090120-pe4iykdqpymqaxr96tpubiqn7j.png
I see this on Firefox. Is this "normal". How can I fix this?
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The inner table is being told to be as wide as its container (width: 100%), and then to move 3ems away from its left edge: (margin-left: 3em)
Switch the innermost TD to have padding-left which might help.
But the standard response here is: "oh god why are you doing nested tables you bad bad man!!11"
This is happening because you are setting "margin-left: 3em", and it is pushing the sub-table outwards.
untested: take out 'margin-left' and use 'padding-left' instead.
or
You could indent your cells value without using a nested table, by adding the padding-left to your parent tables 'td'.
This is because you're giving the table width 100%. It adds the margin onto this, such that the element has >100% width. If you want to get around this, add a div or something above the nested table with a margin: 3em and you can leave the width of the table at 100%.
EDIT: In response to Jobo's comment to his answer, tds don't support margins; however, a padding-left: 3em should work instead.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td style="padding-left: 3em;">
<table border="1" style="width: 100%;">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Changing margin-left from the TABLE element to padding-left on parent TD (like Jobo said)
Just remove the "width" attribute of that table and you should see that it will stay within the cell, even with long text.
This is not intended to be an attack, but rather an aid to help you be a better developer:
There is NEVER a need to have sub tables.
if you are going to use CSS then do it right, one or more external files.
This will help you develop as a web developer - think about how you want to structure the page and then use the correct markup to produce that structure - once the markup is valid then you can worry about styling.
Kindly read the following code as an example (pay attention to the "padding-bottom" of 2nd table row):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>test</title></head>
<body>
<table style="height:300px;width:200px;background:#660000; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;padding-bottom:20px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
<table style="height:300px;width:200px;background:#006600; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
</body>
</html>
I expect that height of two tables should be the same in both IE and FF.
However, FF renders it as expected, but in IE, the first table is 20px higher than the second table. What should I do in order to make it render like FF?
I am also curious about what makes the difference.
IE and Firefox have different rules around how the box model works.
The best way to think of this is that IE is taking the set height of that cell then adding the padding to it. This results in a cell height of 200px.
Whereas Firefox is taking the height of the content of the cell, then applying the padding to it. Because the content height + padding does not exceed the set height of the cell, the cell is not expanded.
You might try playing with a couple of doctypes to see if you can get them to match up, but I dont think IE 7 and FF3 match up for this situation regardless of DOCTYPE. Also, look into possibly using a reset style sheet to get the default margin's, font sizes, etc to match.
I took your test and did the following to make it looks the same in both browsers:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style>
* {margin:0px; padding:0px;font-family: arial;font-size:14px;}
span { border: solid 1px black; margin-top:4px;display:block;}
.first { border:solid 1px blue; }
.second {border:solid 1px orange; }
.third {border:solid 1px yellow;}
.paddit {padding-bottom:10px;height:180px;}
</style>
</head>
<body>
<table style="width:200px;background:#660000; float:left">
<tr valign="top">
<td class="first" style="height:20px;"><span>first row</span></td>
</tr>
<tr valign="top">
<td class="second paddit"><span>second row. This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.</span></td>
</tr>
<tr valign="top">
<td class="third" style="height:180px;"><span>third row</span></td>
</tr>
</table>
<table style="width:200px;background:#006600; float:left">
<tr valign="top">
<td class="first" style="height:20px;"><span>first row</span></td>
</tr>
<tr valign="top">
<td class="second" style="height:180px;"><span>second row</span></td>
</tr>
<tr valign="top">
<td class="third" style="height:180px;"><span>third row</span></td>
</tr>
</table>
</body>
</html>