I am developing a card board which is 4x3. So I have tryed to do markup with XTHML Transitional. I have used containers mixed with tables.
The example for first row:
<table>
<tr>
<div class="slot_01"></div>
<div class="slot_02"></div>
<div class="slot_03"></div>
<div class="slot_04"></div>
</tr>
<tr>
...
</tr>
</table>
Is this correctly done? Or its better to use only div/span blocks instead everywhere and make styling through css?
If you use a table, use table, tr, td, not div.
I think most people nowadays try to avoid tables for anything but "really tabular data" and prefer the "pure CSS" solution.
It depends a bit on your overall markup (e.g. what you want to display in the cells). In your case, I guess I would go for a tableless solution.
No, You need td's in there, like this:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
If you really need to, put your divs inside the TDs.
If your data is tabular in nature there's nothing wrong with using tables. Everyone else is correct - you need to use table cells instead of the divs in your sample code.
Ideally use div/span blocks if you can, but the above code is ok, you just need to wrap each div in a td element:
<table>
<tr>
<td><div class="slot_01"></div></td>
<td><div class="slot_02"></div></td>
<td><div class="slot_03"></div></td>
<td><div class="slot_04"></div></td>
</tr>
<tr>
...
</tr>
</table>
For the lay out of the entIre page I would do it tableless. Remember: XHTML is for structure, CSS for displaying the structure.
Related
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
I am having an issue stylizing a class in the first table while keeping the rest of the tables the same. Let me show an example
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
So I want the class a of the first table to be different than the rest of the tables. How do I go about doing that?
Thank you for your time.
Edit:
I forgot to mention. I cannot add separate classes on each table. I can only give them all the same class. It is generated that way.
In newer browser you can use CSS3's nth-child():
table:nth-child(1) tr.a{
background-color:#ff0000;
}
This works if this is the 1st child of the parent element (e.g. say that these 3 tables are the children of the body.
You can be also more specific that this is the nth table element using the :nth-of-type() selector.
We have an asp.net master page that defines our web application layout using Tables. The goal is to have the content page take up the entire available screen real estate after having displayed the header and footer. This works for us fine in IE but does not work as intended in Chrome or FireFox.
What happens with Chrome and FireFox is that the content section expands only to wrap the content, which, in instances like a welcome screen ends up taking only a small portion of the screen leaving a big blank section at the bottom of the screen.
Here is a basic example of how our layout is structured:
<table style=height:80%;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<!--Header Banner goes here This displays fine-->
</td>
</tr>
<tr style="height:100%" valign="top">
<!--Content Goes Here. Problem is that page only expands
as much as its content section vs filling up the whole page. -->
</tr>
<tr>
<!--Footer Goes here. This works fine!!-->
</tr>
</tbody>
</table>
Your problem is that you're using tables for layout. This would be easily achieved with proper HTML using something like a sticky footer (http://ryanfait.com/sticky-footer).
I'd recommend grabbing the HTML5 boilerplate or similar (http://html5boilerplate.com) and working from there.
If this is an existing web app that you can't change the HTML of then Javascript might be a solution...
There is no good way to specify in CSS that a element should be at least as high as the screen. You have to resort to JavaScript.
Since determining the height of the client are of the screen is again something that every browser version might do slightly differently, it is safest to use jQuery:
// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
You are missing some <td></td> and " in your code.
Also add
html,body {
height:100%;
min-height:100%;
}
to the StyleSheet. And HTML is
<table style="height:80%;width:100%;background-color:yellow" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="background-color:red">
Header Banner goes here This displays fine
</td>
</tr>
<tr valign="top">
<td style="background-color:green;height:100%">Content Goes Here. Problem is that page only expands as much as its content section vs filling up the whole page.</td>
</tr>
<tr>
<td style="background-color:blue">Footer Goes here. This works fine!!</td>
</tr>
</tbody>
</table>
Live preview >> jsfiddle
Set margin-top:0px in your content tr tag
I am currently re-styling a site but unforunately I am unable to edit any of the markup, which leads me to the following problem...
I have a table, similar to this:
<table>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
and I want to display all the table cells on one line. In good browsers, I'm using:
table tr {
display: inline;
float: left;
}
to achieve this. However, this doesn't work in IE7. Is there any other CSS I can use to achieve the same effect? I have to stress that I have no access to the markup whatsoever and none of the table rows or cells have any way of accessing them directly so there's no way I can position absolutely.
You can't do that, I believe.
A tr is a table row and I'd expect the unexpected when trying to float one.
Besides, any element floated is instantly a block level element, so display: inline is redundant.
(The only exception when using it to prevent double margin bug in IE6 - but only if you have a margin set).
You could restructure the HTML with JavaScript, but I would not recommend you do that:)
I agree with #Pekka that this is illegal. The best course of action here would be to add small js to transform table into somethings else. If you have access to just css you can still do that for IEs by adding a behavior and for other browser if that work - just use your solution.
You can attempt inline-block but styling table elements with things such as float is a sin. You can attempt hiding the entire table and insert some load of loading icon while you extract the table info and display it with semantic markup.
Best course of action in this case is to ask for access. Just say you can't do the work without access to the markup. If they won't let you, just don't do the work.
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>