I am having difficulties getting a span tag to work properly inside a table. It appears as if the entire span tag is being ignored that is defined anywhere in between table tags in Firefox, but in IE this shows up correctly.
Maybe I am missing something, but I have created a small example CSS and html file that displays differently in Firefox and IE. Hopefully someone can tell me why it is behaving this way or how I can rearrange the html to resolve the issue in Firefox.
---main.css---
.class1 A:link {color:#960033; text-decoration: none}
.class1 A:visited {color:#960033; text-decoration: none}
.class1 A:hover {color:#0000FF; font-weight: bold; text-decoration: none}
.class1 A:active {color:#0000FF; font-weight: bold; text-decoration: none}
.class2 A:link {color:#960033; text-decoration: none}
.class2 A:visited {color:#960033; text-decoration: none}
.class2 A:hover {color:#0000FF; text-decoration: none}
.class2 A:active {color:#0000FF; text-decoration: none}
---test.htm---
<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">#import url("/css/main.css");</style>
</HEAD>
<span class="class1">
<BODY>
<table><tr><td>
---Insert Hyperlink---<br>
</td></tr>
</span><span class="class2">
<tr><td>
---Insert Hyperlink---<br>
</td></tr></table>
</span>
</BODY>
</HTML>
I'm sorry to say, but your HTML is a mess. The reason that IE will display the span is probably a remnant of the browser wars, when Netscape and Microsoft constantly battled each other of who could make sense of the worst HTML. The only tags allowed inside the <table>-tag are <legend>, <colgroup>, <tbody>, <tfoot>, <thead> and <tr>. If you want your <span> to be visible, place it in <td> inside <tr>
Something like:
<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">#import url("/css/main.css");</style>
</HEAD>
<BODY>
<table>
<tr>
<td>
---Insert Hyperlink---<br>
</td>
</tr>
<tr>
<td>
<span class="class2"></span>
---Insert Hyperlink---<br>
</td>
</tr>
</table>
</BODY>
</HTML>
Also, decide if you are going to use lower or upper case characters in your tags. It makes it easier to follow your code.
You can't have a span there is the short answer, only a <tr>
<body> should contain your elements, nothing but <html> should contain <body>
What you are probably after is this:
<html>
<head>
<title>Title Page</title>
<style type="text/css">#import url("/css/main.css");</style>
</head>
<body>
<span class="class1">
<table>
<tr>
<td>---Insert Hyperlink---<br></td>
</tr>
</table>
</span>
<span class="class2">
<table>
<tr>
<td>---Insert Hyperlink---<br></td>
</tr>
</table>
</span>
</body>
</html>
Another thing to keep in mind, there's no reason for those spans (table can have a class) or those tables (if you're only using a single cell, use a <div> or something), a simple <div> would probably do everything you want:
<div class="class2">
---Insert Hyperlink---
</div>
You can't have span directly contained by table. Basically, text in tables must be contained within cells (td or th), which in turn must be contained by rows (tr), which in turn should be contained by tbody, thead, or tfoot elements, which then can be contained by table. As of HTML5, tbody can formally be implied (whereas previously that was just something browsers did, despite a previous spec requiring something between table and tr).
The HTML validation service is useful for dealing with these sorts of things.
I don't think there should be a problem having a SPAN inside a table assuming it is inside a cell
Make sure the table itself is formatted correctly with proper rows and cells. IE might be rendering the table even if it is broken
Cant you put the class directly on the tr-tag like this:
<table><tr class="class1" ><td>
---Insert Hyperlink---<br>
</td></tr>
be aware that your code is nestled, so try keep the classes direct on tags
Your nesting of tags is a mess..
you cannot have
<tag1>
<tag2>
</tag1>
</tag2>
it has to be
<tag1>
<tag2>
</tag2>
</tag1>
and you are also using span between tr which is not allowed
That's just not valid HTML. you can't just have random tags open and close... try something more like this:
<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">#import url("/css/main.css");</style>
</HEAD>
<BODY>
<table><tr><td>
<span class="class1">
---Insert Hyperlink---<br>
</span>
</td></tr>
<tr><td>
<span class="class2">
---Insert Hyperlink---<br>
</span>
</td></tr></table>
</BODY>
</HTML>
You have two problems here: you start the first span outside the body while spans can only be inside the body. Also you can't end/start spans between table and tr tags.
You should use tbody tags to separate the sections of the table:
<HTML>
<HEAD>
<title>Title Page</title>
<style type="text/css">#import url("/css/main.css");</style>
</HEAD>
<BODY>
<table>
<tbody class="class1">
<tr><td>
---Insert Hyperlink---<br>
</td></tr>
</tbody>
<tbody class="class2">
<tr><td>
---Insert Hyperlink---<br>
</td></tr>
</tbody>
</table>
</BODY>
</HTML>
Related
There is a table inside a paragraph. The cell inside the table has extra new line. Below is relevant part of the code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Page1773023 {}
.f31 {font-family:Times New Roman;font-size:12.00pt;font-style:normal;font-weight:normal;line-height:114%;}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
</style>
</head>
<body>
<div class="Page1773023" style="height:1056px;width:816px;">
<p class="normal"><pre>
<table class="normal" style="width:99.00px;border-spacing:0px;border-collapse:collapse;border:1.00px solid #000000;;">
<tr>
<td style="height:16.000px;width:96.000px;;;" >
<p class="normal"><pre>
<span class="f1" style="color:#FF0000;" >11111</span></pre></p>
</td>
</tr>
</table><br style="clear:left;"/>
</pre></p>
</div>
</body>
</html>
Now when I remove the <pre> tag from outer most <p>, the new lines is not seen. Any ideas why this is happening?
Download HTML Tidy Plugin on firefox and fix the errors...
By the way, I would try to minimize the tags you have used. Why do you need p, span, table, div, pre ?
First decide on what the layout should be and write only the code you really need.
Here is an example of how you could achieve around the same output. Make sure you have firebug or some inspect tools on your browser. It helps you make minor changes to margins and find the correct values.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width:104px;
height:80px;
border:1px solid;
margin-top:10px;
}
.box td {
color: red;
font-family: Arial;
font-size: 10.00pt;
font-style: normal;
font-weight: normal;
line-height: 114%;
}
</style>
</head>
<body>
<table class="box">
<tr>
<td>
11111
</td>
</tr>
</table>
</body>
</html>
The new line between <pre> and <table> is displayed as it is within a <pre> tag. This could be fixed by placing them on the same line: <pre><table ...>
Can there be a table inside a tag?For example:
<a href="javascript:void(0)" style="display:block">
<table>
<tr>
<td></td>
</tr>
</table>
</a>
I tried the previous code. It's working fine in Google Chrome, but it's not working in Firefox.
The draft specification allows it so long as you could put a table where you put the anchor (it has a transparent content model)…
<div><a …><table>…</table></a></div> <!-- Allowed -->
<span><a …><table>…</table></a></span> <!-- Not allowed -->
…but HTML 4 does not (so you may have browser support problems).
Yes, it's valid HTML5 but invalid HTML 4.01. The following snippet passes HTML5 validation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<a href="#">
<table></table>
</a>
</body>
</html>
As far as whether you should do it, that's another question. You probably shouldn't.
Why can't you just add an onclick to <table>?
<table onclick="window.location='page.html'">
<tbody valign="top">
<tr>
<td>content</td>
</tr>
</tbody>
</table>
You may use a <BUTTON> tag and embed the table inside it. To remove button borders set:
style='border:none; margin:0; padding:0; outline:none;
For example:
<BUTTON type="button" onclick="" style="border:none; margin:0; padding:0;"><table>...</table></BUTTON>
<html>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font size="35;""> <b>Datum:</b><br/>
November 2010 </td>
</html>
is my code correct? i would like to increase the font of the first line. Not sure if i have to put 2 "'s here. and it seems it didn't work.
Try this:
<html>
<table>
<tr>
<td style="padding-left: 5px;
padding-bottom: 3px;">
<strong style="font-size: 35px;">Datum:</strong><br />
November 2010
</td>
</tr>
</table>
</html>
Notice that I also included the table-tag, which you seem to have forgotten. This has to be included if you want this to appear as a table.
font-size:35px;
So like this:
<html>
<table>
<tr>
<td style="padding-left:5px;padding-bottom:3px;">
<strong style="font-size:35px;">Datum:</strong>
<br/>
November 2010
</td>
</tr>
</table>
</html>
Although inline styles are a bad practice and you should class things. Also you should use a <strong></strong> tag instead of <b></b>
you dont need those quotes
<td style="padding-left: 5px;padding-bottom:3px; font-size: 35px;"> <b>Datum:</b><br/>
November 2010 </td>
There are a couple of answers posted here that will give you the text effects you want, but...
The thing about tables is that they are organized collections of labels and data. Having both a label ("Datum") and the value that it labels in the same cell is oh so very wrong. The label should be in a <th> element, with the value in a <td> either in the same row or the same column (depending on the data arrangement you are trying to achieve). You can have <th> elements running either vertically or horizontally or both, but if you don't have heading cells (which is what <th> means), you don't have a table, you just have a meaningless grid of text. It would be preferable, too, to have a <caption> element to label the table as a whole (you don't have to display the caption, but it should be there for accessibility) and have a summary="blah blah blah" attribute in the table tag, again for accessibility. So your HTML should probably look a lot more like this:
<html>
<head>
<title>Test page with Table<title>
<style type="text/css">
th {
font-size: 35px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 3px;
}
</style>
</head>
<body>
<table id="table_1" summary="This table has both labels and values">
<caption>Table of Stuff</caption>
<tr>
<th>Datum</th>
<td>November 2010</td>
</tr>
</table>
</body>
</html>
That may not be exactly what you want -- it's hard to tell whether November 2010 is a data point or a label from what you've posted, and "Datum" isn't a helpful label in any case. Play with it a bit, but make sure that when your table is finished it actually has some kind of semantic meaning. If it's not a real table of data, then don't use a <table> to lay it out.
Don't need to quote css attributes and you should specify an unit.
(You should use an external css file too..!)
<html>
<table>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font-size:35px;"> <b>Datum:</b><br/>
November 2010 </td>
</table>
</html>
just write the css attributes in a proper manner i.e:
font-size:35px;
I suggest you use CSS instead, seems like you're going to repeat those lines later on. But to answer your question:
<html>
<head>
<style type="text/css">
td.randname {
padding-left: 5px;
padding-bottom:3px;
font-size:35px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="randname"> <b>Datum:</b><br/>
November 2010 </td></tr>
</table>
</body>
</html>
The correct CSS for setting font-size is "font-size: 35px". I.e.:
<td style="padding-left: 5px; padding-bottom:3px; font size: 35px;">
Note that this sets the font size in pixels. You can also set it in *em*s or percentage. Learn more about fonts in CSS here: http://www.w3schools.com/css/css_font.asp
Is a div inside a table allowed or not according to W3C?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
</head>
<body>
<table>
<tr>
<td>
<div>content</div>
</td>
</tr>
</table>
</body>
</html>
This document was successfully checked as XHTML 1.0 Transitional!
You can't put a div directly inside a table, like this:
<!-- INVALID -->
<table>
<div>
Hello World
</div>
</table>
Putting a div inside a td or th element is fine, however:
<!-- VALID -->
<table>
<tr>
<td>
<div>
Hello World
</div>
</td>
</tr>
</table>
You can put div tags inside a td tag, but not directly inside a table or tr tag.
Examples:
This works:
<table>
<tr>
<td>
<div>This will work.</div>
</td>
</tr>
<table>
This does not work:
<table>
<tr>
<div> this does not work. </div>
</tr>
</table>
Nor does this work:
<table>
<div> this does not work. </div>
</table>
While you can, as others have noted here, put a DIV inside a TD (not as a direct child of TABLE), I strongly advise against using a DIV as a child of a TD. Unless, of course, you're a fan of headaches.
There is little to be gained and a whole lot to be lost, as there are many cross-browser discrepancies regarding how widths, margins, borders, etc., are handled when you combine the two. I can't tell you how many times I've had to clean up that kind of markup for clients because they were having trouble getting their HTML to display correctly in this or that browser.
Then again, if you're not fussy about how things look, disregard this advice.
It is allowed as TD can contain inline and block lements.
Here you can find it in the reference: http://xhtml.com/en/xhtml/reference/td/#td-contains
I've got some code that puts a line-through on a TR for deleted rows, but this means that my "Actions" column (that only has) buttons suffers. This is because there are individual spaces between the buttons, which wind up getting line-throughed as well.
After poking around on W3Schools, it boggles me why this example doesn't work:
<html>
<head>
<style type="text/css">
tr {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
How am I supposed to clear the line-through on child elements?
EDIT
I've updated my example - the problem is that I do not want to take the style off the parent element, just a single child element.
You shouldn't have to use important or inline styles for this. Try
h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}
EDIT
In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:
tr td { text-decoration: whatever }
and then when needed
<td style="text-decoration: none;"></td>
There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.
EDIT: Given your example, why not just apply the line-through to TD elements individually
<html>
<head>
<style type="text/css">
td.deleted {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td class="deleted">this needs to be line-throughed</td>
<td>This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
The line-through is applied to the H2, so you have to take it off of the H2.
<html>
<head>
<style type="text/css">
h2 {text-decoration:line-through}
h2.alt { text-decoration: none; }
h2.alt span { border: 1px solid black; }
</style>
</head>
<body>
<h2>Line-through</h2>
<h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
</body>
</html>
(Viewable here: http://jsbin.com/anopa/)
The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.
Edit: updated example
One way to fix this would be to change
tr {text-decoration:line-through}
to
tr td {text-decoration:line-through}
As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.
BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.
Try This
<html>
<head>
<style type="text/css">
tr td {text-decoration:line-through;}
tr td.noline { text-decoration:none;}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td class="noline">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
Notice that the style is "tr td" for both.
<td style="text-decoration: none>
It works, unless what you're trying to uncross is a link to a URL.
Then this phrase also defeats the link.