Probably this is a stupid thing, but I don't see it. What is the problem?
<html>
<body>
<form action="search" method="get">
<input>
<input name="action" value="search" type="submit">
</form>
<table border="1">
<thead>
<th>
<td>Name</td>
</th>
</thead>
<tbody>
<tr>
<td>Smith </td>
</tr>
<tr>
<td>Smith2 </td>
</tr>
</tbody>
</table>
</body>
</html>
The "Smiths" are not displayed under the "Name" cell.
th tags are "table headers", you need to place them inside tr's, "table rows".
<tr>
<th>Name</th>
</tr>
or
<tr>
<td>Name</td>
</tr>
<th>
<td>Name</td>
</th>
Replace with:
<tr>
<th>Name</th>
</tr>
Here are great and fresh post about table explain everything http://woork.blogspot.com/2009/09/rediscovering-html-tables.html must see :)
Th's are the root of your problem. Placing them like so will give you one column like your'e expecting.
<tr>
<th>Name</th>
</tr>
You don't need the < td >< /td > inside the < th > and wrap it in a < tr >, you need:
<tr>
<th>
Name
</th>
</tr>
Do this:
<thead>
<tr>
<th>
Name
</th>
</tr>
</thead>
TH is just like any column () but with different default properties (bold text, center aligned text). So it has to be nested within a row ( )
Fix your THead element:
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
Related
My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
you should assign the id to <tr> tag and not put it in a div
This works:
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<tr id="kiwi">
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
In fact it does work. It is the matter of div content.
Instead of
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
Try for example:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="kiwi">Kiwi</div></td>
</tr>
Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.
There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.
See more here : div inside table
Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.
You can do something like this:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="#kiwi">Kiwi</div></td>
</tr>
This is a question regarding the behavior of the <br> tag when it's inside another tag.
I'm doing this table where there's a <thead> with two <th> inside of it: one reads "name" and the other one "last name". A <br> is inserted between 'last' and 'name' to display the second <th> in two lines and avoid a longer cell width.
Now that "last name" is displayed in two lines, the text in both <th> don't start at the same height.
I would like the text in the "name" <th> to start at the same height than the "last name" <th>.
Typing <th>NAME <br> </th> does nothing.
Typing <th>NAME <br> .</th> does the desired line break.
Why is that so?
Shouldn't blank spaces count as content if they are between tags and, thus, activate the <br> goodness?
How can I achieve two lines in the "name" <th> without unecessary characters on the second line or without having to style it with CSS?
check the html and enlighten me
<html>
<body>
<table border="2px">
<thead>
<th>NAME <br> </th>
<th>LAST<br>NAME</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
<br>
<table border="2px">
<thead>
<th>NAME <br> .</th>
<th>LAST<br>NAME</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm curious about the flawed behavior of the <br> when it is inside another tag.
You could try to put a between them that should do what your are looking for.
<th>NAME <br> </th>
Or you could close the br tag and that should work to
<th>NAME <br /> </th>
Use either style="vertical-align:top;" or valign="top" to align it top
<html>
<body>
<table border="2px">
<thead>
<th valign="top">NAME</th>
<th>LAST<br>NAME</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
<br>
<table border="2px">
<thead>
<th style="vertical-align:top;">NAME</th>
<th>LAST<br>NAME</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</body>
</html>
Does a tag for grouping th or td elements exist?
I need something like this:
<table>
<thead>
<tr>
<th></th>
<th></th>
<GROUP>
<th></th>
<th></th>
</GROUP>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<GROUP>
<td></td>
<td></td>
</GROUP>
</tr>
</tbody>
</table>
No, col and colgroup (which must be inserted before the first element) are not a solution.
Does exists a tag for grouping th or td element?
Yes, it's called colgroup.
Don't want to use a colgroup? Sorry, that's how grouping table columns is done in HTML. Use the tools given to you, or don't.
for grouping cols (or rows ) in a html table you can use colspan (or rowspan) attribute
<table>
<caption>Test Caption </caption>
<tr> <th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
(or nested table)
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>