I am trying to create a master detail table where one of the rows will contain the detail of a child object. For example we could have a customer and when you click on a row, it expands out to show the customer's orders. The html might look something this:
<table id="report">
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
<tr>
<td colspan="4">
<!-- Details here -->
</td>
</tr>
</table>
What would be the best html/css for cross browser compatibility? I need to support IE6. I want to avoid putting an inner table inside. If I use an unordered list, could I use css to get nice grid effect?
You can use ULs or DIVs to get a grid effect by placing each row in an LI tag, and filling that LI with floated block elements like DIVs that are the same width as your table columns.
<ul>
<li>
<div style="float: left; width: 100px">item1</div>
<div style="float; width: 120px;">item2</div>
...
</li>
...
But you would have to measure your floated DIVs exactly to the pixel, or they may wrap around and break the whole layout. Also if the container div ever gets resized it may break. You could apply a clear="both" to each LI to minimize breakage.
Be aware that if you use any margins on your floated divs that they will suffer from the double margin bug in ie6.
But this is not what UL is for. If you are trying to follow modern trends that shun using tables for anything, you should consider that this is exactly the type of tabular data that tables are supposed to display: Rows and columns of data. It would be semantically correct to use a table and I can't think of any advantage of not using one.
Not to mention that if ie6 compatibility is (unfortunately, shamefully) a big part of the specs of your project, then forget about being super modern and just use traditional working tables.
Ideally I would stop using colspan="4" and have your dynamic code assume that it will be nested inside a 4 column table, and just loop through table rows. As Jeremy B said in his comment, you already have a table anyway.
Related
There can be no tag between <tr> and <td> in an HTML table. (Is there a tag for grouping "td" or "th" tags?) But is there any way to have such a grouping tag that between <div>s with display: table-row and display: table-cell?
This may seem silly, but the point is that I want to add behavior like #mouseover="doSomething" or :class="{someClass: someCondition}" in a Vue.js application, and I need a tag for that. I don't want to add behavior to the whole row, and to stay DRY I would rather not add it to each cell individually.
Edit: HTML does not offer a solution, but in Vue I was able to get the desired result using vue-fragment. It allows to attach behaviour to the dummy <fragment> tag. Example: MatrixRLabel in MatrixR (Those are the beige labels in the upper matrix in this app.)
display: table-row and display: table-cell applies a certain relationship to the parent and child divs. Just like with <tr> and <td>, adding a div "in between them" obviously disrupts this relationship, and causes results I cannot meaningfully predict without a bit of research.
So yes, you will have to apply the behavior to the desired cells individually.
<tr>
<td #mouseover="doSomething">...</td>
<td #mouseover="doSomething">...</td>
<td>...</td>
</tr>
Alternatively, you can identify those cells with a class and then have the behavior check for that class before executing.
<tr #mouseover="doSomething">
<td class="onlyToMe">...</td>
<td class="onlyToMe">...</td>
<td>...</td>
</tr>
Since you haven't gotten an answer before this, perhaps you've figured something out yourself? Do share if you can. Cheers!
Here is some very simple HTML. On Chrome (v57) and Firefox (v55) the two cells to the right are the same height, and on Safari (v11) they are not. On Safari the top cell is only as big as needed for the content, and the bottom cell gets the rest of the space.
My question is - is one of these behaviours correct and one a bug? Is there something simple I can do to get Safari to produce the same results as Chrome (like is there a browser styling difference at play here)? I've inspected it and there are no user agent stylesheet differences that I can see.
img {
max-width: 100%;
display: block;
}
.image-cell {
width: 150px;
}
<table border=1 cellspacing=0 cellpadding=0 bgcolor="#3faaed">
<tr>
<td rowspan="2" class="image-cell">
<img src="http://www.rizwanashraf.com/wp-content/uploads/2009/04/gorgeous-chrysanthemum-3d-wallpaper.jpg" />
</td>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
I know there are a limitless number of ways that I can produce a image with two equal sized boxes next to it - that isn't the question. The question is, why the difference, and, can simple styling be added to homogenize them? (This is a learning question, as I say, there are a million ways to display two boxes beside a box. That's not what I'm asking.)
The spec leaves this explicitly undefined:
CSS 2.2 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
This means in particular that CSS does not define how the height of a cell spanning more than one row is distributed across the rows that it spans.
There is no good way to homogenize the table's appearance except by providing absolute heights to the table and/or the table rows. Given an arbitrary image whose height is not known in advance, this is pretty much impossible with CSS table layout.
Table cells are rendered arbitrarily depending on their content, so you can never be sure how they are going to be rendered. Specifying dimensions is the way to get specific results.
This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 9 years ago.
This is something that makes me crazy every time I see it. Why is using div elements almost an obsession?
I understand why having mostly divs in the markup, each one with an id or (even better) a className can help develop a clean markup and keep control of visual changes.
But, for example, I keep seeing questions about how to make divs behave like a table, and even when they are told somethings will not be compatible with x or y browser version, they still want to do things like this:
<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell">Content</div>
<div style="display: table-cell">Content</div>
</div>
<div style="display: table-row">
<div style="display: table-cell">Content</div>
<div style="display: table-cell">Content</div>
</div>
</div>
Why? ...really: Why??
Why is that better than using a table? Or, why is using tables something that abominable?
Tables are part of HTML elements. They exist for a reason and have a good purpose. They are not deprecated and they are not going to dissapear anytime soon (or sooner than divs for that matter). And most importantly: they behave correctly in all browsers & versions!
So... why the obession with making divs behave like tables? Why do so much people write HTML/CSS that way and then feel proud of something so dirty?
This is not exclusive to tables. I keep seeing divs replacing all html elements, like h1..h6, spans, etc.
Why??
No, using divs that behave like table cells, just for the sake of avoiding table tags is not much better.
It is completely fine to use tables, where tables are appropriate. If you want to display tabular data, use tables. If you just use tables to layout your page in a grid-like environment, then no, don’t use tables.
The reason why people use divs with table behavior is usually because they don’t want to use tables, as they would have a semantical meaning, but they still want to stick to a tabular layout.
In the end, you should never use tables to layout pages though. Many good reasons are given here.
Possibly divs might be better if you wanted a table like this:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
How do i replicate this kind of a structure using <div> or <span>'ed CSS
Depends on what you're trying to replicate.
With the simple example you've given, it's not easy to tell exactly what you're trying to achieve, but if what you're tring to do is put two blocks side by side (ie as columns in a page layout), you just need to create a couple of <div> elements and style them using CSS to appear next to each other. Depending on exactly what you want, there are a number of ways you could do the stylesheets.
One option would be to set them both as float:left;. Use width:... to set how wide you want them in pixels or percent.
If float is too complex for you (and it is quite a big jump in concept from a table-based layout), you may want to consider using display:inline-block; instead. This will also allow the <div>s to be positioned next to each other, but gives you more control over how they position themselves.
Finally, if the contents of the <table> is actually a table of data, don't be afraid of keeping it in a table - the <table> tag and its friends are still valid HTML, and putting tabular data into a table is still a good thing.
If you mean that you want to display two DIVs next to eachother, try using the css styles float:left or float:right. use another div with clear:left, clear:right or clear:both to reset following divs to normal behavior.
Here is a link explaining more about that:
http://www.w3schools.com/css/css_float.asp
(click the 'try it' links for very good examples)
I don't know if that's what you're looking for... but I hope so!
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>