I have an HTML structure with a list of tables like this
<div ng-repeat="row in rows">
<table>
<td ng-repeat="row2 in rows2">
<tr ng-repeat="col in cols">
{{blablabla}}
</tr>
</td>
</table>
</div>
The table is always quite the same, but Angular just redraw it every times (for each elements in 'rows'), which leads to some performance issues.
Is there a way to tell angular to pre render the table in the middle, and then display the list ?
Related
EDIT: I did not construct this table myself. A table absolutely shouldn't be constructed this way and is a fix I'm implementing in the future. But the back-end code unfortunately depends on this exact table structure-each inner table has it's own class names and id's and trigger functions, etc.
I've got this problem working with a table made up of multiple tables - One table is the table itself, another table makes up the header, or <thead>, and another table makes up the <tbody>-there are also divs within the table cells (<td>) it looks like this:
<div id="myTableContainer">
<table id="myTable">
<thead>
<table id="myTableHeader">
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</table>
</thead>
<tbody>
<table id="myTableData">
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</table>
</tbody>
</table>
</div>
The problem is that there's some javascript working in the background to resize these table cells based on how much text is in them, but I can't align the header cells with the with the rows below them properly with CSS. I've experimented with the table-layout property and giving each td a max/min-width, but I'm stuck as to getting all the data & columns aligned because if many columns are created, the table gradually mis-aligns. What's more, both the inner tables are generated dynamically, so it's not as simple as restructuring the table as a whole. This table has proved very difficult to work with as it was developed for IE5 or 6 (works in Quirks mode all the way)
Does anyone have any ideas or sure-fire solutions on how to align this table properly? Preferably a CSS-based solution?
If you can't picture it, my table basically looks like this (and gets gradually worse if more columns are inside of it)
I hope I explained this well enough, if more info is needed I will provide
You should not have <table> tags inside <thead> and <tbody>. Your code should just look like this:
<div id="myTableContainer">
<table id="myTable" border="1">
<thead>
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</tbody>
</table>
</div>
I would correct the old code but in case you don't intend to, look for below hack:
I cannot think of a pure CSS solution. But how about CopyCSS (http://upshots.org/javascript/jquery-copy-style-copycss)?
You can call your copyCSS (you can selectively copy only width property). Question is how to detect if width of column changes?
For that you will have to take help of onresize event (http://www.w3schools.com/jsref/event_onresize.asp). For that you have to dynamically add onResize event to at least first row of your second (i.e. inside ) table.
Right now, I'm displaying tabular data using <table> with HTML, which is semantically correct. I'm wondering whether there's a way to change the presentation of the data for a less tabular appearance when viewing the data.
My markup currently looks like this:
<table>
<thead>
<tr>
<th scope='col'>Vehicle</th>
<th scope='col'>License plate</th>
<th scope='col'>Location</th>
<th scope='col'>Deployment date</th>
<th scope='col'>Date of last inspection</th>
<th scope='col'>Last inspection at</th>
</tr>
</thead>
<tbody>
<tr itemscope>
<th scope='row' itemprop='primary_key_id'> ... </th>
<td itemprop='license_plate'> ... </td>
<td itemprop='location'> ... </td>
<td itemprop='deployment_date'><time> ... </time></td>
<td itemprop='last_inspection_date'><time> ... </time></td>
<td itemprop='last_inspection_odometer'> ... </td>
</tr>
</tbody>
</table>
Of course there's more than one vehicle in the table, but that's pretty much how I'm displaying the data right now. There's also additional columns, for the purpose of my example I'll just stick with these six.
I'm looking to do more of a list view, but I'm not sure if using <ul> and display: table-* here would be semantically correct since this is tabular data. I know I can also put <span itemprop='...'> into the <td> cells along with block-level elements to arrange the content the way I want to, but I'm not sure if this would be correct either.
Presentation-wise, this is what I'm looking to achieve:
<table>
<tbody>
<tr itemscope>
<th scope='row'>
<b itemprop='primary_key_id'> ... </b>
<div itemprop='license_plate'> ... </div>
</th>
<td>
<p>Located at: <span itemprop='location'> ... </span>
<p>Deployed at: <time itemprop='deployment_date'> ... </time>
</td>
<td>
Last inspected on <time itemprop='last_inspection_date'> ... </time>
at <span itemprop='last_inspection_odometer'> ... </span>
</td>
</tr>
</tbody>
</table>
But in this case wouldn't I just be using the table markup to style the information into three columns? Would it make a difference if I did this?
<ul>
<li itemscope>
<div class='column'>
<b itemprop='primary_key_id'> ... </b>
<div itemprop='license_plate'> ... </div>
</div>
<div class='column'>
<p>Located at: <span itemprop='location'> ... </span>
<p>Deployed at: <time itemprop='deployment_date'> ... </time>
</div>
<div class='column'>
Last inspected on <time itemprop='last_inspection_date'> ... </time>
at <span itemprop='last_inspection_odometer'> ... </span>
</div>
</li>
</ul>
What is the best way to markup and style the data?
Tables are semantically correct.
What you try to achieve in your example is not good.
Use tables, but for identification and additional properties you can dynamically assign classes or IDs.
Another way is to add data-* attribute to table element.
<td data-some-key="value">
Also I don't see a semantic problem if you will use code from your last example for your custom mark-up of rows.
If the markup you use under “Presentation-wise, this is what I'm looking to achieve” suits your needs, use it. It does not seem to be possible to achieve such presentation using just CSS on the current markup. (The obstacle is that you would need to combine two cells into one. This might be possible in a sense using Grid Layout, but it’s not ready for prime time yet.)
Using div class=column is not more semantic than using a table. Actually, less.
Sadly, you can't always present data semantically in HTML if you want it to be displayed in a certain way. The dl element might help in this case, though.
I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>
I have a table like this below. And there is a div container with information (usually large text), so I want to position these divs straight under each tr row to make them toggleable (like sliding panel). Can you please advise how to position it with CSS/Javascript? Though, this html is not semantic so if there is another way to do this without a div inside tr (I can't remove table in the code, but maybe some dd/dt?) - it'll be great!
<table width="100%" id="datatable" class="table-sortable">
<thead>
<tr>
<th id="th_name">Name</th>
<th id="th_email" class="table-th-sort ">E-mail</th>
<th id="th_birthday">Birthday</th>
</tr>
</thead>
<tbody>
<tr class="table-tr-group-head">
<td class="someclass">Name1</td>
<td class="table-td-sort">abc#abcd.com</td>
<td class="someclass">01.01.1981</td>
<div class="info">Large text1</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name2</td>
<td class="table-td-sort">def#abcd.com</td>
<td class="someclass">02.02.1982</td>
<div class="info">Large text2</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name3</td>
<td class="table-td-sort">ghi#abcd.com</td>
<td class="someclass">03.03.1983</td>
<div class="info">Large text3</div> <!-- this one -->
</tr>
</tbody></table>
P.S I cannot inject another tr row after each like <tr><td> </td><td><div class="info">Large text</div></td><td> </td></tr> because this table is generated by Javascript and somehow when I make it there is a data shift.
Moo, I fought with this one for quite a while on my app....there's no simple solution really. Datatables can't handle colspans, which limits the ability to add rows as you've noticed. Unless you want to do some creative spanning of divs the old fashioned way, adding a row is basically out. Since Datatables has such tight control of the table syntax, doing some sort of shifting via CSS could be theoretically possible, but incredibly difficult....but I suspect if you went this route, you'd be doing a massive jumble of javascript inner html insertion.
After banging my head for quite a while, I settled for Qtip (http://craigsworks.com/projects/qtip/) I have the tip pop under the row it was triggered from via context and css, which gives a quasi-illusion of the table shifting. For a while I considered dumping Datatables, but I found that our customers really appreciate the functionality that it provides and others don't even come close. As an added bonus, it's very easy to setup and is very customizable.
Good luck.
I created a design for my website. I am planning to make it with TABLES because it seems to be the easiest. The tables are not going the way I intended.
There was a problem putting the code on the page so I put my HTML document (.html) and the way I want it to look (.jpg) in the below zip-file link:
http://ericlounge.host22.com/000/22014/0aa.zip
If someone could give me the code or explain my error that would be great!
I would avoid using tables, but it's your choice.
<Table>
<TR>
<TD rowspan ="3">
Navigation
</TD>
<TD>
TITLE
</TD>
<TD rowspan ="3">
SideBar
</TD
</TR>
<TR>
<TD>
ADS
</TD>
</TR>
<TR>
<TD>
Content
</TD>
</TR>
</Table>
This does not answer your question, however, it will give you reasons why you should look at a different approach for your layout/design rather than tables.
Why not use tables for layout in HTML?
To counteract the "tables is the easiest" option then have a look at Yahoo's YUI templates and examples. These can probably produce exactly what you are after with little effort.
http://developer.yahoo.com/yui/grids/