Table alignment in a single HTML page - html

This is a theme, HTML or css issue. So please don't leave this when I mention "tiki". I believe it can be solved with a supposedly simple css script.
In our university page, I use the Tiki-wiki platform. Please take a look at the people page. This page consists of multiple tables, in each, there's a group of people listed.
The problem: In the previous version of Tiki, all names in the whole page were aligned without my intervention. Now in the new version of Tiki, you see that all names are not aligned. Every table has its own positioning of the names. This is the case although all tables have exactly the same html tagging and css styling and exactly same image sizes.
The fact that this worked in the previous version of tiki, made me believe that this is nothing but a styling issue, since themes also were updated.
Could you please tell me what I have to do to fix this and make all names aligned? For each table I created my own div with class name "peopletablediv".
If you require any additional information, please ask.
PS: Recreating the whole page isn't a preferred solution.

Just add
.peopletablediv .wikitable {
table-layout: fixed;
}
to your site's CSS and you're done.

In the CSS, you can specify a fixed size for the td conaining pictures :
.wikicell
{
width: 408px; /* or any convenient value here */
}

I'd try to add this to your CSS
.wikitable > tr > .wikicell:first-child{
width: 350px;
}

For an HTML solution, you could add a <colgroup> to each of the tables, just below the <table> tag:
<colgroup>
<col style="width: 380px;" />
<col colspan="2" />
</colgroup>
So the table code might look like this:
<table class="wikitable table table-striped table-hover">
<colgroup>
<col style="width: 380px;">
<col colspan="2" style="background-color:yellow">
</colgroup>
<tbody>
<tr>
<td class="wikicell"><a><img width="120" ...></a>
</td>
<td colspan="2" class="wikicell">Prof. Dmitry Budker <br><a ...>Send e-mail</a>
</td>
</tr>
</tbody>
</table>

Sorry i can't add a comment, not enough "points" still apparently, so this is more of a question than an answer...
Which version of Tiki did you upgrade to and from? (we released 4 new versions the other day) And where is "the people page", sorry, i don't see a link.
If you upgraded from Tiki 12 (say) to 13 or 14 then the whole framework has changed to Bootstrap so some extra custom CSS may well be needed to recreate previous appearances (as you suspected). Can't really tell exactly what without an example.
Hope i can improve my "answer" when i have a little more info, thanks :)

Related

How I place 3 links in the same line on HTML without using CSS

I need to put 3 links in the same line aligned like left, center, and right without using CSS.
Its something like this, I hope this helps
If you really want to do all of this without using any CSS, you can use tables.
<table>
<tr>
<td>First link</td>
<td>Second link</td>
<td>Third link</td>
</tr>
</table>
Otherwise you don't really have much of an option if you want the spacing and all you got on your image example. I would also not recommend using tables all that much, because pretty much everything should be responsive for mobile devices these days, and tables are really hard to fit in to a 320px of screen width.
This is extremely bad practice. A list of links is not tabular data. HTML is not a layout tool. This is how things were done in 1996. The web is better (in some ways) now and we do not do things this way now.
It is possible to hack a layout with a table and obsolete presentational attributes. The data is not tabular, however, so this is bad food for screen readers and search engines.
It is also not HTML 5. What you want to achieve is not possible with HTML 5. This is HTML 4.01 Transitional which, when it was released two decades ago, was only ever intended as a stop-gap while people converted over to using CSS for presentation.
<table width="100%">
<tr>
<td width="33%">A link</td>
<td width="34%" align=center>A link</td>
<td width="33%" align=right>A link</td>
</tr>
</table>
assuming you can add inline styling ,you can use this
<div>
<a href="" >firstlink</a>
<a href="" style ="text-align: center;
width: 90%;
display: inline-block;
margin: auto;">secondlink</a>
<a href="" >thirdlink</a>
</div>
else you can use one by answered by community wiki

td stacking without using css

Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

html table td's and tr's disappearing

I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:
<table border="0">
<tbody>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
</tbody>
</table>
However, when I view it through dev tools in chrome, I get this:
<table border="0">
<tbody>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
</tbody>
</table>
Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result.
Pic below:
I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.
Edit:
Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.
I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.
According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;
</tr>
</table>
</div>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)
Sorry it is not an answer, but it won't let me comment.
I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.

Reset.css is overriding colgroup background in IE7/IE6

I have a table where the columns have a different background set by a colgroup. However, in IE6/7 it's completely ignoring the colgroup background and taking the reset.css background value for the cell (which is background:transparent). How can I fix this without having to go to each cell and manually entering a background value?
HTML
<table id="services-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<colgroup>
<col class="services-oddcolumn" />
<col class="services-evencolumn" />
</colgroup>
<tbody>
<tr>
<td>Column #1, Row #1</td>
<td>Column #2, Row #1</td>
</tr>
<tr>
<td>Column #1, Row #2</td>
<td>Column #2, Row #2</td>
</tr>
</tbody>
RESET(this is placed above the main CSS file)
html,body, table,tr,th,td {background:transparent;} //it's taking this background value for TD and column
CSS
.services-oddcolumn{background-color:#000 !important; width:10%;}
.services-evencolumn{background-color:#fff !important; width:10%;}
EDIT - In the end there's no "clean" fix, I just had to change the reset.css file so table,tr,th,td tags were excluded from background:transparent property
Firstly, congratulations on even knowing about the <colgroup> tag, let alone using it. It's not exactly the most well-known element in the HTML developers arsenal.
Sadly however, one of the reasons it's not very well known is that it is not very well supported, and it sounds like you've hit upon a bug which you're not going to be able to work around.
Have a look at this page: http://marc.baffl.co.uk/bugs.php and search for the word 'colgroup'. You'll find a description of various bugs you'll encounter, along with a table of which browsers support it properly at all. Unfortunately for you, IE6 and IE7 have the word "no" in every column of that table.
You may have a hard time getting this working if you plan to support IE6 and IE7.
[EDIT]
It's worth noting that this lack of support in IE is particularly ironic given that <colgroup> was originally an IE-specific extension back in the IE4 days.
If you want to support older IEs, my suggestion would be to abandon <colgroup> and simply use classes on your <td> elements to achieve the same effect.

HTML fixed header table scrollbar [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
I've tried several methods to get a scroll bar from an HTML table with a fixed header but had no luck. I think I need a solution where the header is somehow "attached" to the table body (rather than the typical nested table solution). Every solution I tried messes up the width of the header columns and the body columns. In other words they get out of synch and the columns of the header don't line up properly with those of the scrolling table. The widths of the headers and the columns vary from column to column.
Is there any way for me to achieve this? I'd rather not use JavaScript. Oh and I need this to work in Internet Explorer as well.
Update: It is pretty important for me to get this functionality. I need the fixed header for both column and row headers. So far no solution has worked properly. I considered making the headers separate tables, but this wouldn't work when scrolling since the headers would stay fixed.
It seems like there would be many use cases for fixed HTML headers so it is surprising to me that there is no adequate solution.
(Oh, and I tried the option suggested by opatut in the link, but it doesn't work in all browsers and I need this work in Internet Explorer, Firefox and Chrome. If it doesn't work in Internet Explorer 6 that's OK).
Oh, and if I must fix the column widths or row heights, that's OK too, I would just be glad to have a working fixed header HTML table (cross-browser).
I have a solution which is a pure CSS solution and allows the table to be normal and variable width. This is a new solution and has some issues depending on the design of your headers. The good news is that if your headers are left-aligned, or your columns are fixed width, it should be fine. There are some visual bugs in IE6, and I've found that some cells need a min-width to keep the headers showing if the content in the column is less wide then the header. All the issues are visual, so if it looks good you're done. The table body is totally normal, and since there's no JavaScript you don't have to do anything if the user re-sizes the page.
Check out my solution and leave me a comment
http://salzerdesign.com/blog/?p=191
I know you're trying to avoid Javascript, but I was in exactly the same boat as you (struggling with what to do for days on the exact challenge for a new application) and solved the problem in about 10 minutes once I found Datatables:
Working example of a solution: http://www.datatables.net/examples/basic_init/scroll_y.html
It EXACTLY matches header and body columns width-wise every time. Widths can be specified, but it's also intelligent enough to auto size. Column highlighting and sorting is supported by default using the provided sample CSS. Switching to a paginated model (what I ended up using) is a single line of code. And....the best part--if you're concerned that your user might not have Javascript turned on, it degrades perfectly back to standards-compliant HTML tables. IMHO, it's the least painful, most feature rich solution out there that fully supports IE.
If it makes you feel any better, I've used this solution on both a government (military) site and an international bank's websites....both the most demanding and strictest customers I've ever come across...and both were extremely happy with the results.
My first answer didn't attempt to fix both headers and columns. Here's an example that should work in all typical browsers (but it may need some tweaking).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
th { text-align: center; border: 1px solid black; padding:3px; }
td { text-align: center; border: 1px solid black; padding:3px; }
th.c1, td.c1 { width: 100px; }
th.c2, td.c2 { width: 150px; }
th.c3, td.c3 { width: 60px; }
th.c4, td.c4 { width: 100px; }
th.c5, td.c5 { width: 150px; }
th.c6, td.c6 { width: 60px; }
#rowScroll { height: 100px; } /* Subtract the scrollbar height */
#contentScroll { height: 100px; width: 300px; }
#colScroll { width: 272px; } /* Subtract the scrollbar width */
</style>
<table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
<tr>
<td id="void" style="border: 0;">
</td>
<td id="rowHeaders" style="border: 0;">
<div id="colScroll" style="overflow-x:hidden;">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr>
<th class="c1">A</th>
<th class="c2">B</th>
<th class="c3">C</th>
<th class="c4">D</th>
<th class="c5">E</th>
<th class="c6">F</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td id="colHeaders" style="border: 0;">
<div id="rowScroll" style="overflow-y:hidden">
<table cellspacing="0" cellpadding="0">
<tr><td>R1</td></tr>
<tr><td>R2</td></tr>
<tr><td>R3</td></tr>
<tr><td>R4</td></tr>
<tr><td>R5</td></tr>
<tr><td>R6</td></tr>
<tr><td>R7</td></tr>
<tr><td>R8</td></tr>
<tr><td>R9</td></tr>
</table>
</div>
</td>
<td id="content" style="border: 0;">
<div id="contentScroll" style="overflow:auto">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
<tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
<tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
<tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
<tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
<tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
<tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
<tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
<tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
</table>
</div>
</td>
</tr>
</table>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var content = $("#contentScroll");
var headers = $("#colScroll");
var rows = $("#rowScroll");
content.scroll(function () {
headers.scrollLeft(content.scrollLeft());
rows.scrollTop(content.scrollTop());
});
</script>
</body>
</html>
Try my solution, it's bug free and optimized for performance (not sacrificing functionality):
http://code.google.com/p/js-scroll-table-header/
If you try it and need any help, just ask, I'm the author.
It's a bit too much code to put in here directly, but what it comes down to is, at minimum, you'll need some hefty CSS for this. Using javascript and jQuery can lighten that, so I'll include links to both methods.
HTML + CSS Only
You can use the source on this page to copy an example of how you can do exactly what you're asking via CSS and HTML. This is reported as working in pretty much all current browsers (Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)), but if you have to go back to IE 5.x, it starts to fail.
Javascript/jQuery
If you decide that you're open to including Javascript and jQuery, there's a second option that looks a bit simpler to implement: this blog article shows how.
All I've found need fixed values for cell width and height, so if you want to keep it dynamic you're stuck with JavaScript.
One solution I like is this one, but you need to define a width for each colum. ยป Fixed headers in large HTML tables at The Code Project.
If you don't want to use JavaScript, maybe you can set the fixed column widths with PHP. I would determine the average string length of the cells to get the column width:
column_width = column_average / (all_cells_average * column_count) * table_width
You can use DataTables without JavaScript. It won't have sorting but the table, headers and divs that are hosting them will work. Just look at the page source - it has 3 divs each with a table with identical widths in thead. Top and bottom just provide header and footer and the one in the middle provides data. It's actually pretty close to your original idea that you need to heep these parts separated.