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>
Related
I'm currently fighting with IE. Before I get some rants about tables I know "dont use them", but I didn't write this, I'm just debugging it. I'd like to know if there is some hack to get the table spacing out of the flow on IE, when I absolute position a table. I included some style to help see the issue better. There is a bar of white space that doesn't belong to anything. This works great on FF and Chrome, IE just breaks the flow on this.
<html>
<head>
<style type="text/css">
.button{
float:left;
Background:#0F0;
}
#testCont{
Background:#F00;
}
#testUnder{
Clear:both;
Background:#00F;
Color:#FFF;
}
.tablePop{
position: absolute;
top:60px;
left:60px;
Background:#CACACA;
}
</style>
</head>
<body>
<div id="testCont">
<div class="button">
Button1
</div>
<div class="button">
Button2
</div>
<div class="button">
Button3
</div>
<table border=0 cellspacing=0 cellpadding=0 class="tablePop">
<tbody>
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
</tbody>
</table>
</div>
<div id="testUnder">
Hello World
</div>
</body>
</html>
Put your page in standards mode:
<!DOCTYPE html>
<html>
<head>
You can test this out quickly by pressing F12 and switching the document mode to standards.
Alternatively, you could also use display:inline instead of float:left for .button.
Is it possible to somehow place a whole HTML table in a href link?
Something like: (does not work in IE)
<td class="order_confirm">
<a href="ssss">
<div>
<table width="100%" border="0" cellspacing="6" cellpadding="0">
<tr>
<td><img src="design/img/icon_ok.png" width="22" height="22" alt="objednat" /></td>
<td width="0" class="order_confirm_order">OBJEDNAT</td>
<td width="100%" class="order_confirm_order_desc">Záväzne si objednávam uvedený tovar a súhlasím s platobnými,<br />
dodacími a obchodnými podmienkami prevádzkovateľa.</td>
</tr>
</table>
</div>
</a>
</td>
I am aware of the fact that this is not the best practice, however, I don't really see a workaround for this using a non-table layout... So a solution with a non-table layout would also be acceptable for me.
It isn't correct to place div's or table's in a. (See selfhtml for more information).
What you can do is something like this:
<div onclick="document.location.href = 'new location';">....</div>
In HTML 5 you can put block elements inside an inline element, so there it would work.
For any browser that doesn't support HTML 5, or if you don't have an HTML 5 doctype in the page, the markup will break, and the div and the table will end up outside the link.
If you want your whole table as a link you can simulate it css and javascript.
This example uses jQuery:
<style>
#big-link {
cursor: pointer;
}
</style>
<script>
$(function() {
$("#big-link").click(function() {
window.location.href = "ssss";
});
});
</script>
<div id="big-link">
<table>
...
</table>
</div>
Using html4 event attributes you can make the table itself an anchor-tag.
<table
style="cursor:pointer"
onMouseover="window.status='http://www.stackoverflow.com/'"
onMouseout="window.status=''"
onMouseup="window.location='http://www.stackoverflow.com/'"
width="500" height="500">
how to center the
I would like to center the text "Information". Tried the align="center" but didn't work
Is my code correct?
<table border="1" width="100%" cellspacing="10">
<tr>
<th>column1</th>
<th>column2</th>
<th bgcolor="#4F81BD"><strong><font size="5" color="white" face="calibri" align="center">Information</font><strong></th>
</tr>
</table>
[EDIT] Here is the code I have built thanks to your answsers.
<!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>
<title>Title</title>
<style type="text/css">
.centerText{
text-align: center;}
</style>
</head>
<table border="0" width="100%" cellspacing="10">
<tr>
<th></th>
<th></th>
<th class="centerText" bgcolor="#4F81BD"><strong><font size="5" color="white" face="calibri" >Information</font><strong></th>
</tr>
</table>
</body>
</html>
Is this the right way to handle this?
In your code you putting align="center" to the font tag inside of the strong. All of these elements are inline and doesn't fits all the cell width. To align it on center you need to put such attribute to the th tag or change displaying of the string and font tags to display:block to fit all the width.
The simplest way to do this is in CSS:
table tr th { text-align:center; }
P.S. Better way is to move all of your inline style to CSS files.
Use text-align:center;
see this live example on jsfiddle
[EDIT] Note that you should implement these styles within your CSS with classes or elements as pointed out by fellow users
Try using CSS.
table th {text-align:center;}
The <font> tag is deprecated and it's use is considered a very bad idea. Use CSS instead.
Using the <strong> tag just to get the text to be bold is also not particularly useful, especially inside a <th> element. The <th> already indicates that the text matters because it's the header of a table column. In many browsers, the text is already made bold in <th>s
The CSS style used to center the text is: text-align: center
Trying this
<th bgcolor="#4F81BD" align="center"><strong><font size="5" color="white" face="calibri" >Information</font><strong></th>
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 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>