|
CSS - Is This Definition Of A Table Legal?
Hi!
Is this definition of a html table valid xhtml? <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> In short, is it legal to have more TDs in one TR than in another? Thanks Similar TutorialsI have the following table definition Quote: <table style="padding:100px; border:solid; border-width:2px; width:100%;" align="center"> but the padding has no effect. I changed the padding from 100px to 500px without any change. I change the border width and it works perfectly. What am I doing wrong? -------------------------------------------------------------------------------- Hi! Imagine I have many blockquote elements on a page like this: <blockquote> <p id="quote">...</p> <p id="author">...</p> </blockquote> <blockquote> <p id="quote">...</p> <p id="author">...</p> </blockquote> ... Is it legal to have many id="quote" and id="author" ? Or should I use class. Have a doubt here cause the id="..."s are under a blockquote element (enclosed in a defined element). Thanks The following codes gives messed up display. City lines with York. I tried float both dd and dt to left but still same. Never used definition list before. What am I doing wrong here? Code:
ul, menu, dir, dl { display: block; list-style-type: square; margin: 0; padding:0; }
dt { width:30%; }
dd { width:70%; }
<dl>
<dt>Town</dt>
<dd>York</dd>
<dt>City</dt>
<dd>New York</dd>
</dl>
Hi guys, i have a page of categorised links which i've wrapped using definition lists: Code: <dl class="link_category"> <dt class="category_name">Magazines</dt> <dt>XchangeIT</dt> <dd>The company through which newsagents obtain electronic magazine invoices.</dd> </dl> I would like for each list to flow after the proceeding so I've used float: left, however there's the occasional gap (see attached img). And I cant figure out whats causing this! Here's my CSS: Code:
.link_category {
float: left;
width: 200px;
text-align: left;
margin: 0 20px 20px 0;
}
.link_category dt {
font-weight:bold;
}
.link dt.category_name {
font-size: 14px;
line-height: 18px;
margin: 0 0 9px 0;
}
Thanks in advance I'm sure this is obvious to all you CSS folks, but my CSS is messy and one reason is this: .container { text-align:left; border:2px solid #000000; padding:0px 10px 0px 10px; margin:auto; } .menucontainer{ width:640px; } .mainmenucontainer{ background-color:#abcdef; } .adminmenucontainer{ background-color:#ffcc66; } So, I have containers that will differ in size and color. How do I do this definition so in my html I can do: <div class="mainmenucontainer"> <div class="container menucontainer mainmenucontainer"> I had a brief overview of CSS2.1 specs (http://www.w3.org/TR/CSS21/) but could not find what am looking for. I am wondering if it's possible to define a class more than once and the definitions get merged together. eg. // File generic.css table.panel, table.tree {font-family: Arial, Verdnana, Geneva, Helvetica, sans-serif;} th.panel, th.tree {font-family: Arial, Verdnana, Geneva, Helvetica, sans-serif;} td.panel, td.tree {font-family: Arial, Verdnana, Geneva, Helvetica, sans-serif;} // File tree.css table.tree {text-transform: capitalize;} th.tree {height: 25px;} td.tree {height: 25px;} Basically I want all panel & tree class to have same font-family, but only the tree class to have additional text-transform & height adjustments. Is there a better way to do this? hi, i wanted to change a look of form submit buttons a bit and i found out i can do it using inline css, example: Code: <input type="submit" name="subbtn" value="Send" style="background-color: #fbbe2c; width: 120px; font-family: tahoma; font-size: 12px; font-weight: bold; color: #66666;"> but can't figure out how to define it using internal or external css. i tried this: Code:
<head>
<style type="text/css">
input.btn { background-color: #fbbe2c; width: 120px; font-family: tahoma; font-size: 12px; font-weight: bold; color: #66666; }
</style>
</head>
...
<input type="submit" name="subbtn" value="send" class="btn">
which seems the most correct to me, but it doesn't work. style defined in this way is ignored. i'm sure there is a way to do it, but it seems i don't know the right way. could you help, please? Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics. Anyway, as such I need to find out a few things I know but don't know if you know what I mean. Where can I find out the official definitions of CSS operators... * html for example..what the * does. class1>class2...what the > does...stuff like that. Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks 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. 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>
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. -------------------------------------------------------------------------------- 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! 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! 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 I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. |
|||||||