Styling a table in html/css - html

What do you think is the most logical and efficient way to style a table in HTML/CSS?
I've seen a lot of people using HTML properties in their code like
<table width="80%" cellspacing="2" border="0">
<tr>
<td align="right" nowrap="nowrap">
</td>
</tr>
</table>
Wouldn't it be easier to give tables and tds classes/ids and format them in an external stylesheet?

Not only would it be better, it's the proper way to do this. The code you have now is not something you'd want on a production site.

You shouldnt use inline styles: quite good thread (What's so bad about in-line CSS?)
and if you dont like writing class for each, try :nth-child for styling (super useful): http://www.w3schools.com/cssref/sel_nth-child.asp

Yes, It would.
However, when HTML was first being built, CSS was not as handy as it is now. With the abilities of CSS today, I would recommend creating the initial layout with HTML tags, and leaving any styling attributes (i.e. align, text wrap, border, etc.) to a CSS stylesheet.
Good Question!

there are lot of ways by using those you can style your table.
inline Css
internal CSs
External Css(Mostly prefered)
SASS(use Mixin)
LESS
Compass

The best and easy way to style a table is using CSS. You can see the example code below;
Code:
<style>
.my_table{
border:2px solid blue;
width:50%;
padding:5px;
}
</style>
<table border="1" class="my_table">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>

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

Multiple CSS class, with a element

I have links in a table.
like:
<table>
<tr>
<td></td>
<td></td>
<td><a href="lalala"</a></td>
<td></td>
</tr>
</table>
I want to use mutliple classes:
<td class="XYtableItem itemID"><a href="lalala" /></td>
The problem is:
I cant reach the a elements in CSS
I tried these:
.XYtableItem a {}
a.XYtableItem {}
XYtableItem > a {}
none of these works.
I dont rly know this should work or not.
+I cant put classes to the a elements, but doesnt matter, not working eiter.
They should work, out of curiosity what CSS rules are you trying to apply to the link ? Bare in mind that there may be some other rules in the CSS overriding your ones, giving you the impression you're not targeting the link correctly.
.XYtableItem a
This one should be good
The first rule should match as that selects any a element that is the descendant of an element with the XYtableItem class.
The second rule will any a with the class XYtableItem and the third any a element that is a descendant of a XTtableItem element - possibly just missing the class selector (.).
Try adding content to your a tag as it shouldn't be self closing.
Example at http://jsfiddle.net/mfhHG/
As other answers suggest, most probably your style might be overriding by something else.. You firebug to inspect the element and trace the style.. it should show you what exactly is being overridden by which style..
There are some problems with your HTML,
<table>
<tr>
<td>Link</td>
<td>Link2</td>
<td>Link3</td>
<td>Link4</td>
</tr>
</table>
And the selectors should be very simple.
Check this example.
<style>
td.aaa a {
color: green;
}
td.bbb a {
color: yellow;
}
</style>
<table>
<tr>
<td class="XYtableItem aaa">aa</td>
<td class="XYtableItem bbb">bb</td>
</tr>
</table>
The above works for me.
(Although I have had some problems with some styles like padding etc when using on a tags on IE)

Easy way to apply calculated/inline styles to html?

Really annoying situation, and maybe there is an easier solution.. but I basically have a simple table I have styled in the general format:
<style type="text/css">
table.master_table {
... global table styling
}
.master_table td {
... master table td styling
}
.master_table td.dv {
... td dv style
}
.. more styling
</style>
<table class="master_table">
<tbody>
<tr>
<td class="dv">
.. nothing special
</tr>
</tbody>
</table>
Now the problem is the server doesn't support the "style" element so I need to manually apply the style to each level i.e.:
<table style="... global table styling">
<tbody>
<tr>
<td style="td styling;td dv style">
.. nothing special
</tr>
</tbody>
</table>
Is there any programs that can do this? Or is there any easier way to do this? I basically have a Wordpress.com blog that looks beautiful, in Live Writer because of some custom styling but as soon as I post, it strips out the style block. As a test I went through an manually did some of the above and it works, its just insanely painful and error prone.
if you are on wordpress.com i do not think you can control the css or anyother file.
you have to host your own wordpress.org blog to customize your theme.
So I found an online solution called "emogrifier"
Works well, all you have to do is enter css, then enter html and it will output inline styles.
There is a plugin called Art Direction which lets you add custom css on a per post basis. If you use this style on several different pages you should add the styles to a global stylesheet.

Having strange issues with inline inputs in IE

I've been building a form all day and doing most of my dev in webkit browsers because of the good developer tools. I went to test in IE and I'm having some really strange results with regards to having 3 columns of divs in a row. I can't seem to find a fix. Has anybody seen this issue before (see link below)?
http://65.61.167.68/form/
I suggest avoiding the use of display: inline-block, since IE 6 and 7 don't implement it properly. In this case, you can solve the issue in FF by changing line 33 of your stylesheet. Remove the display: inline-block and instead, float left.
#paydayForm .row .column
{
float:left;
margin-bottom:5px;
margin-right:18px;
margin-top:5px;
width:170px;
}
No answer to your problem, but for this kind of data it's a lot better to use tables instead of divs. Divs can be useful, but not in this case. Check the following example: http://jsfiddle.net/NtXwQ/
<table>
<tr>
<td colspan="2">amount requested</td>
<td rowspan="2">info<br />text<br />here</td>
</tr>
<tr>
<td>first name</td>
<td>last name</td>
</tr>
<tr>
<td>zip code</td>
<td>city</td>
<td>state</td>
</tr>
<tr>
<td colspan="2">date of birth</td>
<td>social security no</td>
</tr>
</table>
Using CSS you can change the width, height, padding, etc. and create the same style you're using now. In the end a setup like this is also a lot easier to maintain. Using divs to display tabular data will only give you headaches :)