I want to space the headers above the form unevenly on one line and not really sure what the best way to do this using HTML and CSS. I have used span tags and padding in the past but this works differently in different browsers and does not line up correctly. Im sure there is a better way then wrapping all of the headers in span tags. Thanks so much for your help. I have attached an image of what I would like to achieve.
If you use a table, the cells will auto size to the content in them. Tables are still useful when dealing purely with tabular data. Alternatively, you can assign a class to each header cell to set specific widths.
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td>one</td>
<td>this one needs more space and will grow</td>
<td>this guy isn't as long</td>
<td>short</td>
</tr>
Example on JSFiddle: http://jsfiddle.net/JdSy2/
Related
I have been using the page-break-after command to break an html report after each "grouping". My problem is it is now leaving my table floating in the middle of the page. Each page is different where it puts the table, sometimes at the top of the page, sometimes in the middle and sometimes at the bottom. There is quite a bit of complexity in the HTML so I decided to take an image instead:
I will try to sum up the html
<body>
<table>
<thead>
{this is top bold box on each page}
</thead>
<tr>
<td>
<table> {this is the results table}
<thead>
{this is the headers of the "floating" results table}
</thead>
{tr's of data here}
</table>
</td>
</tr>
</table>
</body>
we are using display:table-header-group to get the table headers to show up on each page. Can you help me figure out what I need to do to get those tables to be at the top of the page? (this is in IE8)
Impossible to tell from the information provided. Obviously, a CSS issue but can't tell where to begin. Common problems are the display CSS not completely accounted for in the print CSS and, using display:none; on an child element inside of a div tag that has height defined (removes the content but the space is still there.) The latter is what I suspect. I've found adding background colors to various elements very helpful in debugging CSS problems such as yours.
If this is the structure:
<table cellspacing="0" cellpadding="0">
<tr>
<td>I don't need anything here, should I always put a here?</td>
<td>item </td>
</tr>
<tr>
<td>model</td>
<td>one</td>
</tr>
<tr>
<td>model</td>
<td>two</td>
</tr>
<tr>
<td>model</td>
<td>three</td>
</tr>
</table>
How will a screen reader read a blank td? Is it semantically correct?
Semantically correct IMHO would be to keep an empty cell really empty. However, I, too, fill empty cells with s for pragmatic reasons.
As for screen readers, I'll have to make an educated guess: Empty nodes will likely not be read, because HTML consists mostly of whitespace text nodes, which readers ignore, and I assume, that is collapsed to a simple space in reader applications (since non-breaking is a property of visual media).
For rendering visually, one could rely on the CSS table property empty-cells:
table {
empty-cells: show;
}
Semantically, an HTML table is really just an array (matrix) of data, and there’s no reason why a no-break space character could not be treated as data. Whether it really makes sense depends on the purpose, structure, and content of the table. In most cases, there is a better solution. See some suggestion in Empty cells in HTML tables.
On the technical side, the no-break space has width and height, depending on the font, and this imposes minimum requirements on the dimensions of the cell. This may matter, though mostly in cases where the row or the column is used just as a separator, e.g. to create horizontal or vertical line.
Another impact of using a no-break space, as opposite to using a normal space or leaving the cell completely empty, is that it may affect the appearance of borders around the cell and background color and background image inside the cell.
Screen readers differ in the way they indicate empty cells, if at all, and this may also depend on the reading mode. In any case, the user gets no indication of what’s really going on, i.e. what an empty cell (if the emptiness is conveyed to the user at all) means. In visual browsing, the meaning may (or may not) be rather obvious.
Thanks to editors like Dreamweaver this practice became somewhat of a standard, so even if it is not a perfect solution - at least you won't be alone in doing it. Plus it is more compatible with older browser than CSS's empty-cells.
there isn't anything exactly saying you shouldn't use use a blank TD, and it passes when you try to validate.
Although, a more elegant approach would be to use colspan.
i.e.
<tr>
<td colspan="2">item </td>
</tr>
But this will align your content to the left, and you will have to manually (via css) apply styles so the content is aligned where you want.
The good thing about using it with colspans, is that screen readers will read only what's there, and not the empty spaces
I have a layout made in photoshop and I'm trying to slice it up and put it into a table layout. I'm trying to make a layout using a table that looks like this:
http://imgur.com/eKndd.gif
but when I marked up the table all the widths of the cells seem to be incorrect and not what I want.
My markup is:
<table width="950" border="1">
<tr>
<td colspan="2" rowspan="3" width="268" height="251">rotating pic</td>
<td colspan="2" width="682" height="150">banner</td>
</tr>
<tr>
<td colspan="2" width= "682" height="48">top nav</td>
</tr>
<tr>
<td width="404" height="54">filler</td>
<td rowspan="2" width="278" height="533">right bar</td>
</tr>
<tr>
<td width="191" height="479">left bar</td>
<td colspan="2" width="481">content</td>
</tr>
</table>
The cells need to be of specific width and height for the images, but when rendered none of the widths are correct. What am I doing wrong? Please help. Thanks.
Your heights are too high for the layout you are expecting, also for your banner, top nav and filler to be the same height, you actually have to make their height attributes the same...
Also, not to be a downer, but might I suggest not doing table based layouts? You should considering using CSS.
Layout is not function of HTML. That is what style sheets are for. With that said your code will be completely inaccessible. That means if your code is for any sort of business in the US or UK are wide open to discrimination lawsuits. In addition to accessibility failures your page code will be seriously bloated and will waste your bandwidth and your user's time.
My suggestion is do not use HTML for layout. Practice separation of markup and presentation. Do not use any attributes that have any sort of cosmetic purpose, such as: width, height, border, cellpadding, cellspacing, and so on.
Do your users a tremendous favor and do not use markup for presentation.
I see there are two possibilities
1) The images you are adding are not re-sized to the size which you want to fit into.
2) When adding images using tag try explicitly setting the height and width. Try this
HTML IMAGE LINK TUTORIAL
IF you are new then try the layout using DIV, tables are old school way.
Can we see your code with images included? I would suggest taking out the heights and widths, putting the images in, and then playing around with heights/widths to get the to your liking. Your layout looks overly complicated. Could you go with a simpler 3 column layout and treat the whole header as one element?
I would like to ask what is the better way of specifying HTML column width? the width attribute or the style attribute? Assuming I am using IE 6. Does IE render the width attribute better than style?
By width attribute
<table width="900">
<tr>
<td width="450">A</td>
<td colspan="2" width="450">B&C</td>
</tr>
....
</table>
OR by style attribute
<table style="width:900px;">
<tr>
<td style="width: 450px;">A</td>
<td colspan="2" style="width: 450px;">B&C</td>
</tr>
....
</table>
Firstly before I answer your question, something you should know is how tables are rendered, experiment with the table-layout fixed style for the table element:
If the browser knows the width of the first table row columns upfront (if you provide the table layout fixed style on the table) the browser can begin rendering the top of the table even before its calculated the width of any resulting rows. What this means? Tables populated by Ajax calls with a fixed layout can begin displaying results to a user before the full ajax call is finished. Best way to think of this is like a progressive jpg. In the end your pages will appear to load faster.
table
{
table-layout:fixed;
}
Now to answer your question.
Actually neither example you provided is correct. you typically do not set width on a cell that is spanned across 2 or more cells. In any table its a good idea to create at least 1 row with all the cells, this can either be in the TH or (just the way I like to do it in a blank tr.
For example...
<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>
What ever way you decide to use style or just standard html width, the choice is yours, but in the end you should have your first row (if table layout is fixed) or any row (if table layout is not fixed) to contain the width definition for each invidivual cell. This will also help you with planning the correct looking table, hope this helps.
Test the table layout fixed, by creating a huge like 10 000 row table, and test the rendering speed vs a non fixed table layout.
The whole debate about HTML 4 vs XHTML , style vs attributes I think is really a question of maintainability. I don't think there is anything wrong setting the width using Style or plain width with HTML 4 transitional, they both do the same thing. The reason why you can do both is because HTML has evolved a bit, yes it can get messy! Good luck
Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.
eg.
<td><div style="width: 50px" >...............</div></td>
I have something like this:
<table>
<tr>
<td><nobr>hello</nobr></td>
<td>this column can contain a lot of text, for some rows</td>
<td><nobr>world</nobr></td>
<td><nobr>hello world</nobr></td>
</tr>
... more rows to come
</table>
Basically 3 of the columns have very short text, and I want them to be <nobr>. The other one can have very long text, and I want it to take all the remaining space. But what happens is that the table gets bigger than the whole browser window to accommodate the big column. If the text is really big it will eventually break, but it still gets quite a bit outside the window.
I tried setting width, max-width, but no luck. What am I doing wrong?
Your example definitely behaves well as Zyphrax says.
The problem you report can only happen if, in the long column, there is a word which is very large or the content has no whitespace in it. Is that the case? May be you are using instead of spaces, and it is preventing the normal wrap that browsers do automatically.
If the text in the column is not wrapping at all, mostly you are using or you forgot to close a <nobr> somewhere.
Not sure if that helps.
I just threw this into my browser (tried both IE8 and Firefox). It stayed well within the Browser window:
<html>
<body>
<table>
<tr>
<td><nobr>hello</nobr></td>
<td>this column can contain a lot of text, for some rows.</td>
<td><nobr>world</nobr></td>
<td><nobr>hello world</nobr></td>
</tr>
</table>
</body>
</html>
Otherwise you might want to try tricks like width: 100% or margin: 0 auto; on the table.
You shouldn't be using the nobr tag, it is not a valid HTML tag. Use "white-space: nowrap" CSS instead.
eg.
<td style="white-space:nowrap">your long text</td>