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>
Related
I'm working on a site targeting older feature phone type mobiles that have limited css and html support. I have a table with a single row and two cells, that each contain a link. Ideally i would like both to be clickable. I tried a div solution but on some of the phone browsers I tested the text would dissapear, I assume because this is not entirely semantical.
Any sugggestions on how to accomplish this without using a div?
here is my html
<div><table style="width:100%;"><tbody><tr>
<td class="leftTd"><Left</div></td>
<td class="rightTd"><a href="link2>Right</a></td>
</tr></tbody></table></div>
The markup of the HTML you gave isn't valid. Here it is as valid markup
<table style="width:100%;">
<tbody>
<tr>
<td class="leftTd">Left</td>
<td class="rightTd">Right</td>
</tr>
</tbody>
</table>
then if you make sure the a element are set to display: block; e.g
td a {
display: block;
}
DEMO
td a {
display:block;
width:100%;
height:100%;
}
Also fixed your HTML markup from errors:
<div>
<table style="width:100%;">
<tr>
<td class="leftTd">Left</td>
<td class="rightTd">Right</td>
</tr>
</table>
</div>
In the first link, you have a stray <.
In the second, you didn't close the quotes after href.
Old phones typically have browsers that won't grok broken HTML syntax very well, so I think this is the reason the links won't render.
I suggest you use an editor that checks HTML syntax, or at least some checker like the W3C validator.
HTML4 event attributes
<table border="0" style="cursor:pointer" onMouseover="window.status='http://www.stackoverflow.com/'" onMouseout="window.status=''" onMouseup="window.location='http://www.stackoverflow.com/'" width="158" height="158" style="background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png')">
<tr>
<td style="display:none;">This entire table is a link with no content</td>
</tr>
</table>
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%}
<html>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font size="35;""> <b>Datum:</b><br/>
November 2010 </td>
</html>
is my code correct? i would like to increase the font of the first line. Not sure if i have to put 2 "'s here. and it seems it didn't work.
Try this:
<html>
<table>
<tr>
<td style="padding-left: 5px;
padding-bottom: 3px;">
<strong style="font-size: 35px;">Datum:</strong><br />
November 2010
</td>
</tr>
</table>
</html>
Notice that I also included the table-tag, which you seem to have forgotten. This has to be included if you want this to appear as a table.
font-size:35px;
So like this:
<html>
<table>
<tr>
<td style="padding-left:5px;padding-bottom:3px;">
<strong style="font-size:35px;">Datum:</strong>
<br/>
November 2010
</td>
</tr>
</table>
</html>
Although inline styles are a bad practice and you should class things. Also you should use a <strong></strong> tag instead of <b></b>
you dont need those quotes
<td style="padding-left: 5px;padding-bottom:3px; font-size: 35px;"> <b>Datum:</b><br/>
November 2010 </td>
There are a couple of answers posted here that will give you the text effects you want, but...
The thing about tables is that they are organized collections of labels and data. Having both a label ("Datum") and the value that it labels in the same cell is oh so very wrong. The label should be in a <th> element, with the value in a <td> either in the same row or the same column (depending on the data arrangement you are trying to achieve). You can have <th> elements running either vertically or horizontally or both, but if you don't have heading cells (which is what <th> means), you don't have a table, you just have a meaningless grid of text. It would be preferable, too, to have a <caption> element to label the table as a whole (you don't have to display the caption, but it should be there for accessibility) and have a summary="blah blah blah" attribute in the table tag, again for accessibility. So your HTML should probably look a lot more like this:
<html>
<head>
<title>Test page with Table<title>
<style type="text/css">
th {
font-size: 35px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 3px;
}
</style>
</head>
<body>
<table id="table_1" summary="This table has both labels and values">
<caption>Table of Stuff</caption>
<tr>
<th>Datum</th>
<td>November 2010</td>
</tr>
</table>
</body>
</html>
That may not be exactly what you want -- it's hard to tell whether November 2010 is a data point or a label from what you've posted, and "Datum" isn't a helpful label in any case. Play with it a bit, but make sure that when your table is finished it actually has some kind of semantic meaning. If it's not a real table of data, then don't use a <table> to lay it out.
Don't need to quote css attributes and you should specify an unit.
(You should use an external css file too..!)
<html>
<table>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font-size:35px;"> <b>Datum:</b><br/>
November 2010 </td>
</table>
</html>
just write the css attributes in a proper manner i.e:
font-size:35px;
I suggest you use CSS instead, seems like you're going to repeat those lines later on. But to answer your question:
<html>
<head>
<style type="text/css">
td.randname {
padding-left: 5px;
padding-bottom:3px;
font-size:35px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="randname"> <b>Datum:</b><br/>
November 2010 </td></tr>
</table>
</body>
</html>
The correct CSS for setting font-size is "font-size: 35px". I.e.:
<td style="padding-left: 5px; padding-bottom:3px; font size: 35px;">
Note that this sets the font size in pixels. You can also set it in *em*s or percentage. Learn more about fonts in CSS here: http://www.w3schools.com/css/css_font.asp
<!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" lang="en" xml:lang="en">
<head>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" colspan="5">
<span class="validationInline">*</span>
<span class="hint">Required fields</span>
</td>
</tr>
<tr>
<td colspan="5" background="http://media.monster.com.hk/bgr_8.gif">
<img src="/static/cleardot.gif" height="1" width="1" />
</td>
</tr>
</table>
</body>
</html>
Can check it out here:
http://maishudi.com/tt2.html
I've known it's caused by DOCTYPE ,because deleting that part will make it normal:
http://maishudi.com/tt.html
So what's wrong?How can I make it work with the DOCTYPE ?
Note: this probably depends on the browser.
The size of block-level element (td, div, etc) if not specified will only be as big as needed, according to the space taken by its content. If specified, it will try to expand accordingly, except if the content is bigger, in which case it will expand as necessary.
In your example, the cell contains a single character (the non-breaking space), which take the size of single line. Hence, the block element must be at least 1 line-height high; it can't assume any smaller size. This is why your height declaration was ignored.
You may want to use this style:
line-height: 1px;
This sets the line-height to 1px. Line-height is not an element, so the above rule doesn't apply.
Add a style block with this rule
td img {display: block;}
and see Images, Tables, and Mysterious Gaps for a full explanation.
background isn't a standard attribute for TD elements is the reason. Instead use:
style="background: url(/path/to/image.png);"
As for your 1 pixel image, I assume this is simply to make the table cell appear? If so, that's not the advised way of doing it. You can either do:
table { empty-cells: show; }
in CSS although I don't think IE6 supports that. The more standards compliant way is to use a non breaking space:
<td> </td>
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.