Align a column with CSS - html

I want to align columns in a table based on a class on the header.
For example, if I have the following table:
<table>
<thead>
<th>Name</th>
<th class="price">Price</th>
</thead>
<tbody>
....
</tbody>
<table>
I know I can use :nth-of-type but sometimes the column will be the 2th, other time will be the 5th and in some places I'll have several columns in the same table align to the right.
Is there a way to accomplish that?
I don't need to support legacy browsers, not even Internet Explorer 9 (if is works on chrome and/or firefox is enough for me)
Just for clarification, I want to align the text in the columns that are in the body associated with the column at the head

No, you cannot style table cells so that styling depends on a class attribute on a column header th. There is nothing in CSS that connects cells that way.
The most robust way to align a column is to generate class attributes on each cell in it. Well, technically, using the HTML align attribute is even more robust.

EDIT: As commented below this only works with a few properties. Text-align isn't included.
Put this in your CSS:
col.price { text-align:right; }
And your HTML:
<table>
<col />
<col class="price" />
<tr>
<td>First TD of first TR</td>
<td>9,95</td>
</tr>
<tr>
<td>First TD of second TR</td>
<td>4,85</td>
</tr>
</table>
Reference:
http://quirksmode.org/css/css2/columns.html

Related

Unable to align HTML tables parallel to each other

I have created two HTML grid tables but I am finding difficulty while placing/aligning them parallel to each other.
I am using align = right but the table is getting aligned downwards(one below the other) and not shifting to right in parallel order . Can anyone suggest where I am making mistake in my below code and how can I rectify it?
P.S: My below code issue can be checked by copying and saving it in a notepad say test.txt and renaming it as test.html and open it in IE or Firefox browser.
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;" align = "right">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
Here is your solution:
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
You mean you want the tables side by side rather than one below the other?
You can either add a float: left to the first table (and not forget to clear after the second table), or put each of the tables in a div and set display: inline-block on those divs.
jsfiddle.net/S45CQ/
use float:left property and either reduce width of the table or put them in a wrapper div.
Also remove two closing body tag from your html.
The align right style on a table will align all elements inside to the right. (text and images etc in each column).
You need to add "float:left;" in the style.
See here: http://jsfiddle.net/TmC4C/
You also need to specify align="left" on your first table. Although you are much better off using floats instead.
I have changed your widths to 50%, as it could also be the widths of the tables are too large for the screen size, causing one to push the other below it.

CSS: Is it possible for a td to infer style from its header or vice versa?

I am formatting my tables, and some of them have hyperlinks in the right hand column which I want right aligned. Is there a way from css to infer that the column has links in it, and right align the whole column, including the header?
Alternatively, is there a way to apply a class to just the header and have it affect the alignment of all of the columns underneath it?
I recognize that I can apply a style to the individual th and td elements, but I was hoping for something a little more elegant.
EDIT: There is only one table.
<table>
<thead>
<tr>
<th>Some Column</th>
<th>actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some data</td>
<td>Edit</td>
</tr>
</tbody>
<table>
I am asking if I can apply a style to the element for the actions and write CSS which will cause all of the elements in that column be style a particular way.
This functionality is not part of CSS. Shaun Inman suggested something like a parent selector that would allow parents to inherit from their children, but there are tons of issues with this methodology.
I would suggest, instead, that you try a javascript solution. You could search the table to see if it contains links, then add a class to the table in the case that they do. Something like this:
HTML
<table>
<thead>
<tr>
<th>Normal</th>
<th>Align Me</th>
<th>Normal</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
jQuery
$('td > a').each(function(){
var $td = $(this).parent();
$td.addClass('align-right');
var $th = $td.closest('table').find('th').eq($td.index()).addClass('align-right');
});
Here is a fiddle for you to check out.
CSS can only be applied to child or siblling elements. Children cannot tell their parents what to do.
Applying a class to the TD is the right thing to do.
What you want can not be done with CSS.
But in your special case, you can refer to the fact, that the column with the links is the last one in each row.
There is a special "pseudo-class" in CSS for this: last-child.
th:last-child { ... }
td:last-child { ... }
I came up with a solution, but it only works when the actions are the last column in the table.
<table class="hasActions">
...
</table>
And CSS:
table.hasActions td:last-of-type, table.hasActions th:last-of-type {
text-align: right;
}
Since this doens't work for arbitrary columns, I'll leave the question open for now.

Using CSS3 to give per three table rows a background color

An odd question maybe, but I want to use CSS3 to do this, but I am not sure if it's possible. I tried to experiment with nth-child and nth-of-type, but I could not get it to work. I guess it's very hard to get what I want without using Javascript.
Anyhow, let me tell you what I want...
I have three <tr> elements in a table which I want to give a background color. Beneath these table rows, we have three more table rows. Those will not get a different color. The problem: how do you select them? With even or odd, it's not possible... but is there a possibility to combine nth-of-type with even or odd? Or is this utopia?
I know that I can give these rows a class and make it work, but that is not what I am aiming for. Would love to solve it with CSS3, even if IE won't support it. Is there a way to do this?
HTML:
<table class="dummyclass">
<tbody>
<tr class="This_should_get_a_background_color">
<th>Dummytext</th>
<td>Dummy dummy</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Great game</th>
<td>yesterday</td>
</tr>
<tr class="no-background-please">
<th>Dummytext</th>
<td>Dummy dummy</td>
</tr>
<tr class="no-background-please">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="no-background-please">
<th>Great game</th>
<td>yesterday</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dummytext</th>
<td>Dummy dummy</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Dumminho</th>
<td>Golazo</td>
</tr>
<tr class="This_should_get_a_background_color">
<th>Great game</th>
<td>yesterday</td>
</tr>
</tbody>
</table>
And for the CSS, well I tried a lot of things like tr:nth-of-type(2n+1), but I saw here that that is not an option for me: http://css-tricks.com/examples/nth-child-tester/
For a fiddle, check here: http://jsfiddle.net/95vrb/1/
I have given the rows descriptive classnames, so that you can understand what I am trying to do.
There could be a better way of doing it but this works.
Basically it will add the background to every 6th child, starting from the 1st, 2nd and 3rd element.
http://jsfiddle.net/95vrb/2/
tr:nth-child(6n + 3),
tr:nth-child(6n + 2),
tr:nth-child(6n + 1) {
background: #f00;
}
I find this to be an excellent introduction to :nth-child http://css-tricks.com/how-nth-child-works/
You could use this:
.dummyclass tr:nth-of-type(-n+3), //First three rows
.dummyclass tr:nth-of-type(n+7) { //Last three rows
background: #aaa;
}
Fiddle: http://jsfiddle.net/Shiazure/95vrb/5/
Of course, this is tailored to the example you gave, and would need to be changed based on the number of cells/rows.

Is it necessary to put the <td> inside a <tr>

<TR class="bcgrndClr">
<span class="Title">
My title
</span>
</TR>
I wrote this part, but the background color is not coming in chrome and other browsers, where as working fine in "IE".
so is it necessary to put a <td> before <span>
or should i go for <th> instead of <tr>
or how else should i give the title (with some conditions) to this particular table
TH and TD are interchangable, but not TH and TR. Thats how i been using it at least.
you can do something like:
<tr><td colspan="2"><span>Hello World</span></td></tr>
colspan is used to make a TD element stretch across multiple row elements.
Yes, you need <td>. Browsers will still try to render the table if you write invalid HTML, but the rendering will be inconsistent between browsers.
<th> can take the place of <td> if the cell is a header cell. It does not take the place of <tr> which is always required.
You can always check the HTML5 spec if you are in doubt about which elements are required and which are optional:
The tr element represents a row of cells in a table. Permitted
contents Zero or more of: one td element, or one th element
If you look at the HTML 4 spec or HTML5 Spec, you will see
HTML 4:
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ATTLIST TR -- table row --
%attrs; -- %coreattrs, %i18n, %events --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
>
HTML5:
4.9.8 The tr element
Content model: Zero or more
td, th, and script-supporting elements
Notice the TH and TD? Those are the only two child elements allowed.
What happens when you add an invald element to the TR is up to the browser. Some will try to figure out what you are doing, others will remove it from the flow and add it after. Write valid code so the browser does not have to guess.
Since you have a class of title, it seems like you should not be using a row. If you want a title row on the table, you want to use the <caption> element.
From MDN:
The HTML <caption> Element (or HTML Table Caption Element) represents
the title of a table. Though it is always the first descendant of a
<table>, its styling, using CSS, may place it elsewhere, relative to
the table.
Basic usage:
<table summary="Description Text">
<caption>My Table Of Numbers</caption>
<thead>
<tr>
<th>C 1</th>
<th>C 2</th>
<th>C 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>C 1</th>
<th>C 2</th>
<th>C 3</th>
</tr>
</tfoot>
</table>
JSFiddle: http://jsfiddle.net/vM688/
According to spec, a tr can contain only th and td elements. As other have said, don't be lazy and write the few extra characters to make your HTML valid
Use
<table>
<thead>
<tr>
<!-- text b/w <th></th> will bold and center aligned by default -->
<th> You title here </th>
</tr>
</thead>
<tbody>
<!-- Content of you table here -->
</tbody>
</table>
A td tag stands for table data whereas a tr tag is a table row.
So you make a row in HTML and then add a td to it the number of tds you add decides the number of columns in that row.
A th tag stands for table heading which can be used in a row.
The background color will show if you add the span tag inside the td. Your code will look somewhat like this:
<table><tr class="bg-color"><td><span class="title">My title</span></td></tr></table>
And the css should go like:
.bg-color{background:#ff0000;}

Rowspan/colspan problem

I want to span the header of my table to 2 columns(2 td s) and to 2 rows(2 tr s). I tried using rowspan and colspan together, but it doesnot work for me. The header doesnot have anything written in it. It just colored background. Codes I wrote is as follows
<table width="100%" cellpadding = "2" cellspacing = "0" border= "0">
<tr valign = "top"><th colspan = "2" rowspan = "2" Style="background:#FCE14E"></th></tr>
Can I find an alternative for this. Thanks in advance.
The colspan should work. The rowspan is pointless here. The cell already covers the entire row. You cannot add another row to fill the remaining columns (because there are no remaining columns). You'd like to specify the height instead.
Here's the improved example:
<th colspan="2" style="height: 2em; background: #FCE14E;"> </th>
Note that I added a (non breaking space) because the cell would otherwise not render in MSIE browser. Also note that you should prefer using CSS classes above inline styles using style.
Can you please provide more of your markup? You'll need to have multiple rows and columns before this works well. This might be closer:
<table>
<tr>
<th>A</th>
<th rowspan = 2 colspan = 2>B</th>
<th>C</th>
</tr>
<tr>
<th>D</th>
<th>E</th>
</tr>
</table>
Column Header B should end up filling 2 rows and 2 columns, pushing E below C when rendered.
You didn't put any text in the header tage, so no text will be displayed (unless you are using script to add the text).
<th colspan = "2" rowspan = "2" Style="background:#FCE14E">Table header text goes here</th>