I am attempting to provide CSS formatting to two HTML tables, but I cannot. I am setting up a webpage in HTML & CSS (with the CSS in an external sheet) and the layout of the website depends on the tables.
There are 2 tables, one for the head and another for the body. They are set up whereas content is situated in one middle column of 60% width, with one column on each side of the center with 20% width each, along with other table formatting.
My question is - how can I format the tables in CSS? I successfully formatted them in HTML, but this will not do. This is the CSS code for the tables - each table has the id layouttable:
#layouttable{border:0px;width:100%;}
#layouttable td{width:20%;vertical-align:top;}
#layouttable td{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td{width:20%;vertical-align:top;}
The tables in the html document both each have, in respective order, these elements (with content inside not shown):
<table id="layouttable"><tr><td></td><td></td><td></td></tr></table>
Does anyone have any idea why this CSS is not working, or can write some code to fix it? If further explanation is needed, please, ask.
Khnle's method worked fine for me, try putting some content inside the <td></td>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#header { width:100%; background-color:#CCCCCC; text-align:center;}
#layouttable{border:0px;width:100%; text-align:center;}
#layouttable td.col1{width:20%;vertical-align:top;}
#layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td.col3{width:20%;vertical-align:top;}
</style>
</head>
<body>
<table id="header">
<tr>
<td>This is the header</td>
</tr>
</table>
<table id="layouttable">
<tr>
<td class='col1'>20% column</td>
<td class='col2'>60% column</td>
<td class='col3'>20% column</td>
</tr>
</table>
</body>
</html>
Unless its something completely different you want! Hope that helps!
Try the following:
<table id="layouttable">
<tr>
<td class='col1'></td>
<td class='col2'></td>
<td class='col3'></td>
</tr>
</table>
#layouttable{border:0px;width:100%;}
#layouttable td.col1{width:20%;vertical-align:top;}
#layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td.col3{width:20%;vertical-align:top;}
What you had before didn't work because they overwrote each other.
Related
Here is an example:
<table>
<tr>
<td width="400px" id='myTD'></td>
</td>
</table>
here is the external code:
protected string GetHtml()
{
return "<table><tr><td width="800px"></td></tr></table>";
}
Since the width of 'myTD' is smaller than the width of the external code the displayed code is getting out of the main table boundaries , I dont want the innerHTML of 'myTD' to make the main table wider.
Suffice to say that as the external HTML code is given from outside I can't change it without ruin it as I'll never know which width or heights will be essential for the code and which wouldn't.
This wasn't easy in a way that's compatible with all browsers, but I did come up with this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myID {width:400px; overflow:scroll}
</style>
</head>
<body>
<table>
<tr>
<td><div id='myID'>
<table><tr><td width="800"><hr style="width:792px"</td></tr></table>
</div></td>
</tr>
</table>
</body>
</html>
(or as a jsFiddle). That is, by adding a new element inside your td that gets the scrollbars. Trying to apply overflow:scroll to a table cell doesn't work the same on all browsers.
Hope you can use this.
Something i'd never noticed before, but it seems that in Chrome/Firefox (and probably Opera/Safari, i've not checked those specifically) using a strict doctype prevents table rows from being displayed smaller than a value that i'm unable to determine the calculation of.
The following document displays as one might imagine in IE7 with all table rows around 8px in height to match the height of the content (which is probably incorrect knowing IE), whilst in Chome/Firefox the rows are all 23px tall. No combination of border-collapse, padding, margin etc i've found will allow the rows to be smaller than this.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
span {
font-family: Verdana;
font-size: 8px;
line-height: 8px;
}
</style>
</head>
<body>
<table cellspacing="1" border="1">
<tr>
<td><span>One</span></td>
<td><span>Two</span></td>
<td><span>Three</span></td>
</tr>
<tr>
<td><span>Four</span></td>
<td><span>Five</span></td>
<td><span>Six</span></td>
</tr>
<tr>
<td><span>Seven</span></td>
<td><span>Eight</span></td>
<td><span>Nine</span></td>
</tr>
</table>
</body>
</html>
Setting the doctype to transitional causes the table rows to display around 8px in height as expected.
Does anyone have any idea what's causing this apparent minimum row height?
Cheers for any info.
You need to set the line-height on the <td> aswell as the <span>
td{line-height:8px;}
Heres a better explination:
View the code below in your browser.
Notice that even though we've set the font-size of the second set of <span> tags the actual table cells are the same size.
This is because the font size of the table cells IS still the same. We've only changed a child element of them, ie the <span>
setting body{font-size:8px} would work fine as the table will inherit this value.
You can also use it directly on the table ie table{font-size:8px}, or you can use it on the cell as posted above.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style>
body{}
td{}
span {font-family: Verdana;}
span.small{font-size:8px;}
</style>
</head>
<body>
<h1>Default font size</h1>
<table cellspacing="1" border="1" cellpadding="0">
<tbody>
<tr>
<td><span>One</span></td>
<td><span>Two</span></td>
<td><span>Three</span></td>
</tr>
<tr>
<td><span>Four</span></td>
<td><span>Five</span></td>
<td><span>Six</span></td>
</tr>
<tr>
<td><span>Seven</span></td>
<td><span>Eight</span></td>
<td><span>Nine</span></td>
</tr>
</tbody>
</table>
<h2>8px font size</h2>
<table cellspacing="1" border="1" cellpadding="0">
<tbody>
<tr>
<td><span class="small">One</span></td>
<td><span class="small">Two</span></td>
<td><span class="small">Three</span></td>
</tr>
<tr>
<td><span class="small">Four</span></td>
<td><span class="small">Five</span></td>
<td><span class="small">Six</span></td>
</tr>
<tr>
<td><span class="small">Seven</span></td>
<td><span class="small">Eight</span></td>
<td><span class="small">Nine</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Hope this helps
I expected the middle column to be 3 times as wide as the left and right columns. Instead of the withs appearing as specified 200,600, 200 (left to right), the widths appeared as if I specified them in this order: 200, 200, 600. In other words, the LAST column appeared 3 times as wide as the first two.
Why? (This is my primary question)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<table style="table-layout: fixed; width:1000px;">
<colgroup>
</colgroup>
<colgroup>
<col width="200px">
<col width="600px">
<col width="200px">
</colgroup>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
</table>
</body>
</html>
Also, does the following non table approach have any advantages? (This is a secondary question that has been answered)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width:1000px;">
<div id="masthead">
</div>
<div id="top_nav">
</div>
<div id="container">
<div id="left_col">Left
</div>
<div id="right_col">RIght
</div>
<div id="page_content">Page Content </div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#left_col {
width: 200px;
margin:0px;
float: left;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
width: 600px;
}
#right_col
{
width: 200px;
float: right;
}
You have an extra set of colgroup tags with nothing in them. I guess the browser is inserting one (empty) column definition for that and then three more in the second colgroup, because the browser is trying its best to do what you want. Remove the empty colgroup tabs and it'll work as expected.
The second, div-based model has advantages in that its both more semantic and will likely render faster. Those involved in standards will tell you that it is important for your HTML to be semantic. That is, each element has a distinct meaning and you should use the appropriate tag for your meaning. This is mostly to aid in the use of screen readers.
Tables imply your data is somehow tabular. In this case, you're using tables as a mechanism for layout. According to current best practices, this is considered a no-no. Browsers struggle more to render tables and often you see a visual "filling in" of the data, this way. Check out http://havenworks.com/ for an example. (Caution: gruesomely ugly).
Assuming your targeting a html4 based audience (ie: not html5) then the div based layout mechanism makes the most sense.
Hope it helps!
Would something like this work for what you are trying to do?
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="50%"> </td>
<td width="25%"> </td>
</tr>
</table>
Try this for a fixed width:
<table border="1" width="1000">
<tr>
<td width="200">A</td>
<td width="600">B</td>
<td width="200">C</td>
</tr>
</table>
In Firefox, "C" is centered, due to the CSS blurb at the beginning. Why does IE7 left-justify it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
td {
text-align: center;
width: 130px;
}
</style>
</head>
<body>
<div style="width: 300px; background-color: #888">
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td colspan="2">C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That happens because you have width: 130px;. Try setting width only for the small cells, for example by:
td.span {
width:auto;
}
<td colspan="2" class="span">C</td>
See example: http://jsbin.com/etoka
You can also do it the other way around - giving a class to the small cells, the whole row, or best: setting the width of the <table>.
always use this for position a object in center in your page
this feature is worked in all popular browser like IE FF Safari Chrome Opera
<center> This is my centered text</center>
please give me vote if your problem is solved
I have a table inside a cell, and that table is "getting out" of the cell, as see in this screenshot:
alt text http://img.skitch.com/20090120-pe4iykdqpymqaxr96tpubiqn7j.png
I see this on Firefox. Is this "normal". How can I fix this?
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The inner table is being told to be as wide as its container (width: 100%), and then to move 3ems away from its left edge: (margin-left: 3em)
Switch the innermost TD to have padding-left which might help.
But the standard response here is: "oh god why are you doing nested tables you bad bad man!!11"
This is happening because you are setting "margin-left: 3em", and it is pushing the sub-table outwards.
untested: take out 'margin-left' and use 'padding-left' instead.
or
You could indent your cells value without using a nested table, by adding the padding-left to your parent tables 'td'.
This is because you're giving the table width 100%. It adds the margin onto this, such that the element has >100% width. If you want to get around this, add a div or something above the nested table with a margin: 3em and you can leave the width of the table at 100%.
EDIT: In response to Jobo's comment to his answer, tds don't support margins; however, a padding-left: 3em should work instead.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td style="padding-left: 3em;">
<table border="1" style="width: 100%;">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Changing margin-left from the TABLE element to padding-left on parent TD (like Jobo said)
Just remove the "width" attribute of that table and you should see that it will stay within the cell, even with long text.
This is not intended to be an attack, but rather an aid to help you be a better developer:
There is NEVER a need to have sub tables.
if you are going to use CSS then do it right, one or more external files.
This will help you develop as a web developer - think about how you want to structure the page and then use the correct markup to produce that structure - once the markup is valid then you can worry about styling.