Minimally invasive frozen HTML table header row? - html

There are many different ways to freeze a header row of an html table, but I need something minimally invasive. I'm working in a large and complex system in which the table html is generated through many layers of back-end coding and it will be non-trivial and risky to change the table structure (lots of complex javascript and css depends on the HTML structure remaining as-is and I don't want to break anything). So I'm looking for a way to freeze my html header rows (2 rows need to be frozen, not just 1) by changing/adding only CSS and/or adding attributes to the table or rows in the table. Here's an accurate example of my table:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
As you can see it's nothing exotic. But as I've searched for solutions I have found a lot of examples like this, which require more structural changes to the HTML than I dare make (I'm mainly just worried about having to surround the table by section and div elements -- and it seems like a lot of CSS just to freeze a header row). The 1st two rows both need to be frozen so that when I scroll down, they remain nicely in-place. The first data row (non-frozen) is the row containing 0093005.
A few objectives/desires:
Brevity is more important than elegance. I'm fine with a hack, in this case.
Don't change the HTML structure if at all possible, though adding attributes to existing elements can be done.
Pure CSS additions/changes without touching the HTML would be ideal, but I suspect the HTML will need to be decorated to some extent, and that is ok.
Use of js or jquery is a last resort only, to be avoided if possible.
Many thanks in advance for everyone's time.

Related

Table construction: Very Simple Beginner's Question

I have just begun learning elementary 'coding' (HTML) and I'm stuck on a table my teacher presented us for the long weekend (note that I'm on vacation so this is not counting towards any degree and I'm not seeing him until Tuesday). I gather that it's probably a very straightforward solution but I've been wrestling with it since the afternoon.
The linked-to image file shows the table he wants us to construct using nothing but HTML (no CSS). I'm supposed that there are those who'll descry this as not being modern technique but I imagine it wouldn't be bad to know how to at least achieve this using straight-up HTML.
The top row is one long box (say it has one unit of height), the second row from the top comprises two boxes of three units in height, the third from the top row is another long, one-unit high box on top of the bottom-most, one-unit-high five boxes, each of equal size.
The boxes are all empty of data though he drew two large X's in the large boxes][1] to show that THOSE cells would have 'X' placeholders and not be blank. [1]: https://i.stack.imgur.com/LK7oJ.png
The fledgling HTML code I've managed to come up with is this:
<html>
<head>
<title>Under the Table</title>
</head>
<body>
<center> <h2>Table Example</h1></center>
<center>
<table border="3">
<tr>
<th colspan="5"> </th>
</tr>
<tr>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
</tr>
</table>
</body>
</html>
Run the code and you'll see that while everything seems fine the second row with the triple-height boxes are compressed, leaving a large space in the right-hand part of the row. Just run the code and you'll see my issue.
Okay, so to summarize and state it explicitly: I am unable to create a table with eight empty boxes and two large (triple-height) boxes with a single character within them using nothing but HTML (I probably couldn't manage by any other means either but still). Any advice based both on the desired output (picture) and my last failed attempt (whose two large boxes in the second row are too small horizontally and leave an empty non-cell space)?
NB: I'm on vacation and this is not a degree course. Because I'm on additional holiday for a long weekend I was hoping for some input from people who know about markup language (and programming in general). Thanks for any help.
So the colspan argument does not accept a decimal. What you can do in this case is to simple multiply your columns by 2 so you get 10 for the first and third row which means the second row would be 2 instead of 2.50. You'll however probably not achieve a very good end result with that either since your 4:th will only be 50% (10% * 5) in the code you have.
I really don't want to give you all the anwers here if this is for school but you can play around with it if you want to see what happens.

Can't Center Text For Newsletter In Mobile

Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/
I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.
I know this is something simple but I have been pulling my hair out for an hour.
Thanks!
Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.
However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:
<p class="template-label">469-952-6404</p></td>
<td class="expander"></td>
</tr>
</table>
</td>
<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!! -->
<table class="container">
<tr>
<td class="wrapper">
<table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...
My best guess is that you missed opening up the next <td> tag just before that table begins.
Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.

Use a table to create a calendar

So what is the deal with tables? Are they bad for SEO or is that just a myth? I'm creating a calendar for a company to advertise their fund-raising events. As a result, the contents of the calender need to be SEO friendly.
Is there anything wrong with using a table? Google Calendar uses a table, however, those a calendars are private and SEO doesn't enter it.
This calendar is on the front page of a website. It's a big deal. Are tables okay? Or should I try and create one with html?
I'm on bootstrap...is there an existing plugin that works well with it?
Tables are absolutely fine... so long as they are used for tabular data, not for effecting a layout!
They are great for SEO, especially if you take care to markup them up with all the semantic goodness available to you:
<table summary="Interest Rates">
<caption>Interest Rates</caption>
<thead>
<tr>
<th>Account Type</th>
<th>Interest Rate</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Recommended for you: 'Young Saver'</td>
<td>Interest from: 1.6%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Smart</td>
<td>From 2%</td>
</tr>
<tr>
<td>Young Saver</td>
<td>From 1.6%</td>
</tr>
</tbody>
</table>
ref: http://reference.sitepoint.com/html/tfoot
Note we provide a caption to summarize the table, we demarcate the various areas with a table header, table body and table footer, and we also markup out table header cells with th, not with td for normal data cells.
I don't believe tables are bad for SEO, I don't think a specific code language or element could be bad for SEO. I would say give it a shot in divs first, as that would be the better way to do it.
This link might help you decide!

Why doesn't Google close td and tr tags in tables?

Looking at HTML source code of
http://www.google.com/finance/historical?cid=983582&startdate=Nov+28,+2000&enddate=Nov+27,+2010&num=200
I see that Google never closes td and tr tags. There is no </tr> no </td> in the source.
Why?
<tr class=bb>
<th class="bb lm">Date
<th class="rgt bb">Open
<th class="rgt bb">High
<th class="rgt bb">Low
<th class="rgt bb">Close
<th class="rgt bb rm">Volume
<tr>
<td class="lm">Nov 26, 2010
<td class="rgt">11,183.50
<td class="rgt">11,183.50
<td class="rgt">11,067.17
<td class="rgt">11,092.00
<td class="rgt rm">68,396,121
<tr>
Is it to make it harder to parse it because XML parser won't be able to read it ? I have remarked that &output=csv is not available for indices (this url won't work: http://www.google.com/finance?q=INDEXDJX:.DJI&output=csv) whereas it is available for stock (http://www.google.com/finance/historical?q=NASDAQ:GOOG&output=csv will work) so that to get historical data in csv for indices you have to do the parsing job !
This is HTML4 (and not XML). As pointed out in the W3 specs:
11.2.6 Table cells: The TH and TD elements
…
Start tag: required, End tag: optional
Ditto for tr:
11.2.5 Table rows: The TR element
…
Start tag: required, End tag: optional
I believe the intent is to minimize page size by omitting the end tags. They do various additional optimizations which may actually result in invalid HTML, but are handled by browsers in tagsoup mode.
They do this to save bandwidth. Each byte that comes across the wire is thousands of dollars in Google's book, so why waste extra bytes of data on making readable code. However, they've become less concerned with bandwidth over the past couple years as they've increased their server capacity to God-like proportions, hence the larger logo files (for example, their old logo here is a roughly 8.5kb gif file that looks like crap, and their current one is a 25+kb PNG), so I suspect they'll eventually come up with a more standards compliant and cleaner home page.

Data Grid Table with sliding info - div inside tr positioning

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.