|
CSS - Should I Use An Html Table For This?
I am not sure if something like the attached should be put in an html table or done with css positioning. Any thoughts?
Similar TutorialsHello all, First time poster here...hoping to find some answers! I think this is a pretty common issue so I'll be brief. I have a header that is currently coded in HTML (with tables), and I want to convert it to CSS. Of course I need to do this with my entire site, but I figure the header will be a good place to start. This is what I need to convert to CSS: eyemagic.net/zc_header4.htm Thank you for your help! -Dave Hello, I am working with something like this: Code: <div>content one here</div> <table><tr><td>content two here</td></tr></table> How can I get the div to overlap the table and appear on top of it? Thanks! I inherited a big huge site; so there is way much going on; this is a simplification... I am trying to use CSS to divide it into columns, with a column as a div. For debugging, I draw a border around the columns to show me the boundaries. But when I include the following code within the column div: Code: <div class="mycolumn"> <p>Hi, I'm in the Div!</p> <table><tr><td><p> I'm in the table</p> </td></tr></table> <p>Hi, I'm after the table; I would expect to still be in the div</p> </div> The bottom border of the div is drawn right beneath the words "Hi, I'm in the Div", and both "I'm in the table" and "I'm after the table" are outside the box boundary. This does NOT happen if I create a separate test html file and include my Column CSS, but it does happen withing the application. Now, what's going on in the application is extremely complex, involving dozens of included CSS files, javascript, smarty templates which include other smarty templates, and over 4000 files in all. Could one of the other CSS files or something else be redefining <td> somehow, or any other obvious thing that could be breaking the div? Obviously, I keep trying to debug it, but if any old hand has an explanation that might save me another 8 hours, that would be greatly appreciated. Thanks, Chris Hey guys, Im having problems cleaning up my HTML and replacing it by CSS code. <td width="65" height="1" style="vertical-align: top" align="left" bgcolor="#F0F0F0"> The html table code above is what I've been trying to change to CSS. Please help I'm pretty new to CSS but I'm slowly working through problems on a site I am making for some friends (more accurately a template for their content publisher) and I came across a problem. I have a table that contains all of the pictures spaced properly, but I can't get it to resize down to something that makes sense. I tried adding style="... directly to it as well as width="... but none seem to resize it. (I tried both fixed and percentages) Link: http://www.coreconsciousness.com/orangenew.html Heres the code, the external CSS doesn't contain anything important at the moment: Code:
<!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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
td.c1
{
background-image:
url('images/textboxorange.gif');
background-repeat: repeat-y;
width:100%;
}
</style>
</head>
<body>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="900px">
<tr>
<td colspan="8"><img src="images/Orangenew_02.png" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img src="images/Orangenew_04.png" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/Orangenew_05.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_06.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_07.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_08.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_09.png" alt="" /></td>
</tr>
<tr>
<td><img src="images/Orangenew_11.png" alt="" /></td>
<td><img src="images/Orangenew_12.png" alt="" /></td>
<td rowspan="3"><img src="images/Orangenew_13.png" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img src="images/Orangenew_14.png" alt="" /></td>
</tr>
<tr>
<td colspan="8" class="c1">
<h1>#CONTENT#</h1>
<img src="images/Orangenew_15.png" alt="" />
</td>
</tr>
</table>
</body>
</html>
Hi, Have a problem with a left-hand table, the content of which is dragged down the page when the right-hand table grows in the same direction, say when filling it with content. I need to anchor that left-hand table in place but allow the right-hand table to stretch vertically. Have tried absolute CSS positioning, spacers, extra tables, 100% height - nothing seems to work. I've simplified the HTML code for readability, but the general layout is pretty much intact: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="668" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="49" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="667" height="49"> </td> </tr> </table></td> <td width="1"></td> </tr> <tr> <td width="147" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="147" height="147"> </td> </tr> </table></td> <td width="520" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="32"> </td> </tr> </table></td> <td></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="24"> </td> </tr> </table></td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="517" height="419" valign="top"><div align="center">RIGHT-HAND TABLE </div></td> </tr> </table></td> <td height="91"></td> </tr> <tr> <td height="328" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="146" height="328" valign="top"><div align="center">LEFT-HAND TABLE </div></td> </tr> </table></td> <td></td> </tr> <tr> <td height="482"> </td> <td> </td> <td></td> </tr> </table> </body> </html> Thanks, Dyb Hi. First of all i am new to CSS styling . I am using asp.net and i have created an html table in wich i added some treeviews, labels and stuff. I aslo created a StyleSheet where i wanna add style to a specific label within the table. Maybe it's very simple but i don't know what else to do, i am trying to do that by ours. For instance, #Label1 { color:Orange; } it's not working, if has no effect. Label1 is the name of the label. I think i'm not refering correct the Label. Should i add a reference to the table too? i tried something but it were wrong I have a table as specified: Code:
<div id="box"> // 800px set to center it with the rest of page
<table id="box"> // for the rest check the css code
<tr>
<td id="box_top"></td>
</tr>
<tr>
<td id="box_left"></td>
<td id="box_middle"></td>
<td id="box_right"></td>
</tr>
<tr>
<td id="box_bottom"></td>
</tr>
</table>
</div>
Code:
div#box {
width: 800px;
height: auto;
}
table#box {
table-layout: fixed;
width: 761px;
height: auto;
border-collapse: collapse;
}
#box_top {
background-image: url(images/table_02.png);
width: 761px;
height: 27px;
}
#box_left {
background-image: url(images/table_05.png);
background-repeat: repeat-y;
width: 19px;
min-height: 200px;
}
#box_middle {
background-image: url(images/table_06.png);
width: 761px;
min-height: 200px;
background-repeat: repeat;
}
#box_right {
background-image: url(images/table_07.png);
background-repeat: repeat-y;
width: 18px;
min-height: 200px;
}
#box_bottom {
background-image: url(images/table_12.png);
width: 761px;
height: 26px;
}
The table is collapsed (not at the minimum height), and the middle BG is not repeating, not even showing up. Is there anything wrong here? I've tried making a table using <div> tags but I can't really get the float / clear down yet. I've been doing CSS for a whole 2 days . Here is a view of the website. (the first table is using <table>), the 2nd I was trying <div> with floating elements. Is it not possible to do the following? What is the correct way of aligning a cell if not? PHP Code: TD.theader { background-color: #D0D0D0; border: 1px solid #000000; padding:5px; horizontal-align: right; } I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. I am trying to create a table with rounded cellcorners using 1 pixel gif's. It is possible to do this with html only but this creates an enormous amount of code. Unfortunately the tables have to be inserted in the WYSIWYG editor of the Vignette V7 content management system and the people inserting the tabular data are novices and do not know anything about html. Therefore I have to use css and a very simple html table. This is the code I have created so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.light {
background-color: #CCCCCC;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.dark {
background-color: #999999;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.rounded {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="3" class="rounded">
<tr class="header">
<td colspan="3">Title</td>
</tr>
<tr class="light">
<td>Text</td>
<td>More text </td>
<td>Contents</td>
</tr>
<tr class="dark">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
And this is the result: URL As you can see, using the css background property I can only place a pixel in one cellcorner at the time and I need to have them in all corners. Does anybody have an idea how to do this without making the html code too complicated? I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! |
|||||||