I have an HTML page in which I want my content to be centered but, within a specific table on that page, I need to have many of the cells be left-aligned and many to be right-aligned and one cell to be center-aligned. Here's a snippet of HTML & CSS that should give you an idea of what I'm trying to do:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.contentWrapper {
width: 1000px;
border: 1px solid black;
margin: auto;
}
.centerAligned {
text-align: center;
}
.myTable td {
width: 200px;
text-align: left;
}
.myTable td.label {
text-align: right;
}
</style>
</head>
<body>
<div class="contentWrapper centerAligned">
<p>A label for this table...</p>
<table class="myTable" border="1" align="center">
<tr>
<td class="label">Label 1 (Right Aligned)</td>
<td>Value 1 (Left Aligned)</td>
<td class="label">Label 2 (Right Aligned)</td>
<td>Value 2 (Left Aligned)</td>
</tr>
<tr>
<td class="label">Label 3 (Right Aligned)</td>
<td>Value 3 (Left Aligned)</td>
<td class="label">Label 4 (Right Aligned)</td>
<td>Value 4 (Left Aligned)</td>
</tr>
<tr>
<td colspan="4" class="centerAligned">
<input type="button" value="Push Me!">
</td>
</tr>
</table>
<p>Some more content...</p>
</div>
</body>
</html>
I didn't really want to put a class into every single td just to handle how they should be aligned, so I opted to set a default alignment for ".myTable td" of left. This allowed me to leave all the "value" cells to be without a class, but I still need to define one for my "label" cells to get a right alignment for those.
When it comes to the button at the bottom, which I would like to be center aligned, I want to be able to use the class "centerAligned". Unfortunately, using it here doesn't do anything as the ".myTable td" class is considered "more precise" and that cell is given a left alignment instead of a centered one.
I'm using "centerAligned" in other places, so I don't want to simply do away with that class, nor do I want to change the name to something else. I can do this:
.centerAligned, .myTable td.centerAligned {
text-align: center;
}
That seems to work, but this whole thing seems kinda smelly to me. Is there a better way to handle styling these table cells to get the effect that I want without having to define a specific class for every single td?
Thanks!
Use col
Have a look here:
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4
Or here for XHTML
http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-tables.html#sec_26.2.
Why don't you just use a 'th' tag for your labels and put a css on that? That way you wont need to put a label class on all of the td 'labels'. So
.myTable th {
width: 200px;
text-align: right;
}
as mentioned in another answer this should be able to be done with colgroup and col but it can't and the colspan is the reason why, how would a 'colspanned' row know which col to take it's alignment from?
I would perhaps feel like suggesting :nth-child but I think it might suffer the same issue when a colspan was met, and you wouldn't get IE support so here's a fiddle which needs no classes and still uses specificity to get the desired result
working example based on opening code with a colspan - JSFIDDLE
You can use jQuery
$('#myTable tr td:eq(0)').css('text-align', 'left');
$('#myTable tr td:eq(1)').css('text-align', 'center');
$('#myTable tr td:eq(2)').css('text-align', 'right');
eq is zero based. So all first cells will be left aligned, all second cells will be center aligned and so on. Adjust to your needs.
You didn't quite describe which position the cells are that need to be right aligned vs. left aligned. But as Bazz suggested you can use col to set styles for all s in that col or maybe you can do the same with a style if your right-aligned cells are in the same row.
If you're able to use col, all you need is:
<table>
<col>
<col class="label">
<col>
<tr>...
Then
.label { text-align: right }
There's nothing wrong with the way you're doing it though...
Related
I'm trying to create this table layout. Basically the orange 18 you see in the grid means 18% usage between 11am and 12pm on Tuesday. So that's why the hours along the top are best on the edges of the table cell, not in the middle of the cell. That way it's showing the data representing usage over a one hour time range.
I have basically applied a basic hack and right aligned the hours along the top so they kinda look like they're inbetween the cells. This isn't perfect as you can see.
What I want to do is actually have the hours along the top centered nicely between the data cells. I think I could do it with a fixed size column widths, but the table needs to stretch to 100% of the page width and the column widths a percentage. Then it's scalable down to a smaller browser.
Is there a way to do this in HTML and CSS?
To have the first row truly centered between the bottom cells with a single table you can use colspan + widths in percentages without using positioning. That way it will be fluid, it will work with any font, and it won't get screwed when you use 2 digit numbers.
HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<td> </td>
</tr>
<tr>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
CSS:
table {
text-align: center;
width: 70%;
}
table td {
width:8.33%; // 100% divided by (double the number of bottom cells)
}
table th {
width:16.66%; // 200% divided by (double the number of bottom cells)
}
table td[colspan="2"] {
background:yellow;
}
table td,
table th {
outline:1px solid tan;
}
Demo: http://jsfiddle.net/G7KZe/
You could use position: relative; to place your month numbers to be where you want but it's tricky because table cells often behave weirdly with CSS positioning. And the exact positioning can depend on the font used.
I've come up with a solution that requires 2 tables. The idea is to have one table for the headings, one table for the content. The trick is to have 1 cell less in the headings.
Live example: http://jsfiddle.net/w6TnE/
As you can see, the month numbers are perfectly aligned with the borders. But keep in mind that this setup requires a fixed width, in this case, 60px:
td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}
I just added some additional styling to make it clear.
You can use an absolutely positioned element inside a relatively positioned element to get the effect you want. The idea is to style the <th> elements with position: relative and then style the hour numbers themselves in an element with position: absolute. You can then position the numbers anywhere you want in relation to the cell.
Here is an example jsfiddle. To adjust the position of the numbers you may want to use a pixel value instead of a percentage for the right property in the th > span block.
For more information, you might want to read about the different positioning methods.
table td{ text-align:center;}
This will align the text of each cell to the center.
You could always wrap each of the table heading text in like a <div> tag and use the css position:relative and left:2px or whatever number of pixels to make it look good.
example
<table>
<tr>
<th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
</tr>
</table>
I have created a couple of tables. now i need both tables to be next to each other and not one table on top of each other. how can i position the second table next to the first one (to the right) but with sufficient space in between?
this is some code of my second table:
<table>
<h3>Personaldaten</h3>
<tr>
<td>Externe Referenz:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
<tr>
<td>Titel:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
above are 2 entities from the first table, how do i proceed like this?
Try to use a wrapper around the tables and use float:left;
//margin: top right bottom left
<div style="width:500px; margin: 30px 0px 0px 320px">
<table style="width:240px; float:left; margin-right:20px;">
</table>
<table style="width:240px; float:left;">
</table>
</div>
get rid of your absolute positioning if you don't really need it and use CSS like
table{
float:left;
margin:0px 5px;
}
You have two choices really.
If you're happy creating your layout with tables, then put both of your tables within another table. i.e.
<table>
<tr>
<td>
<table>{ table 1 stuff }</table>
</td>
<td>
<table>{table 2 stuff }</table>
</td>
</tr>
</table>
Or you can start looking into 'float'ing your elements.
You can create a new table with 1 row and 2 columns and place your first table inside the first column and your second table inside the second column.That way both tables can be displayed side by side
If it were me, I would surround your tables in a div layer, specifying the width and height of the div layer to force the tables next to each other.
For example:
<div id="tablecontainer">
<table id="lefttable"></table>
<table id="righttable"></table>
</div>
And in the CSS:
table
{
margin: 5px;
}
#lefttable
{
float: left;
}
Obviously, this code isn't going to be exactly what OP wants, but you get the idea.
Either use float: left or display: inline-block.
#1:
table {
margin: 10px;
float: left
}
#2:
table {
margin: 10px;
display: inline-block
}
See http://shaquin.tk/experiments/tables2.html and http://shaquin.tk/experiments/tables3.html.
First, fix the syntax and styling. A table element cannot have an h3 child. Either put the h3 inside a cell (which is inside a tr), or turn it to a caption. Don’t set a width of 150%, as this would make the a cell occupy 150% of the width of the available space. The width of an input field set is best set in characters, using the size attribute in HTML.
Then you can float the tables in CSS as suggested in other answers, or by using align=left in table tags. To create horizontal spacing between the tables, you can set e.g. margin-right on the first table.
Note that for usability and accessibility, forms should normally be presented so that there is one input item with its label on one line, so that filling out the form proceeds vertically in a simple manner. So you might be solving the wrong problem.
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
When you create a basic HTML table everything seems to stay in center of the table. I don't want this how can i stop this from happening?
I wish to use a 2 column html table one for column for a sidebar one for content. Because i have so much content the sidebar text (which is little) gos to the middle of column.
How do i align the text to stay to the top left of the columns?
In the <td> element that contains the lefthand sidebar, try specifying a style that aligns text to the top:
<td style="vertical-align: top">(Sidebar HTML code here)</td>
You can control the alignment of columns directly in your markup by using:
<td style="text-align: left; vertical-align: top;"></td>
or even just
<td align="left"></td>
This will work fine for a 2-column table, but Piccolomomo has the better plan if you are going to use it a lot. This might help you further if you need it:
http://www.w3schools.com/html/html_tables.asp
You can use CSS to change text aligning inside your table:
td {
text-align: left;
vertical-align: top;
}
For aligning text in table you have to use css.Without css or any style sheet you can't make them align.So you can use inline css or external css for that.
<style type="text/css">
table td{
text-align:left;
vertical-align:top;
}
</style>
<table>
<tr valign="top">
<td align="left">
Side Bar
</td>
<td>
Content
</td>
</tr>
</table>
I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.
I am trying to use table for that so it will assign width for each box and fill up whole row.
Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....
How can i have all div in td with same height?
Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.
<table style="width: 100%; text-align:justify;">
<tr>
<td>
<div style="margin-right:15px; background-color:Gray">
Some text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
column 2 text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
Column 3 text here
</div>
</td>
<td>
<div style="background-color:Gray">
Last column text here
</div>
</td>
</tr>
</table>
Like I've told plenty of other people, you shouldn't be using divisions inside table cells.
This will achieve the exact same effect, without the divisions:
<table style="width: 100%; text-align: justify;">
<tr>
<td style="margin-right: 15px; background-color: gray;">
Some text here
</td>
<td style="margin-right: 15px; background-color: gray;">
column 2 text here
</td>
<td style="margin-right: 15px; background-color: gray;">
Column 3 text here
</td>
<td style="background-color: gray;">
Last column text here
</td>
</tr>
</table>
If you get rid of the divs and apply your styles and content directly to the table cells you will get the effect you want.
In case there is no special purpose of using div tag inside td. I would just do it without div. add style to td tag.
Mamu, I would suggest that you do not use inline style elements. Instead of styling your table tags it would be far more efficient, and better to add the the following between your <head> tags:
<style type="text/css">
table {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>
Using only those two lines of code you can apply the same elements consistently across your entire website. If you only wanted to apply them to some elements, you could create classes by adding a "." to a name of your choice:
<style type="text/css">
.MyTable {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>
And add the following to your HTML:
<table class="MyTable">
Note that class names are case sensitive. But this reusable code is far more efficient.
Furthermore, I would urge to consider the use of tables only if you are presenting tabular data. Tables load slower and are not SEO friendly. It would not be semantically correct to use them for layout. You should separate content from presentation whenever possible, and if it is layout you are after I would suggest using divs and other elements instead.