strucure of component inside table html - html

I want to make a table of orders, for each row there's an arrow that show a bill details related to each order and hide when I click again on the button.
How can I make the structure of the table?
I make like this
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
</tr>
</thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>show details</td>
</tr>
//also loop here as the number of bills
<tr>
<td>bill order/td>
<td>product</td>
<td>price</td>
</tr>
I don't think like this structure is correct, and making div inside a table doesn't work, any suggestion please?

Possible structure:
<table id="customerTable">
<thead>
<tr>
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="master">
<td>customer name </td>
<td>order date</td>
<td>sale point</td>
<td>total</td>
<td>
show details
</td>
</tr>
<tr class="detail">
<td colspan=5>
<!-- new <table> with your details of this row -->
</td>
</tr>
<!-- ... more rows ... --->
</tbody>
</table>
Example: http://jsfiddle.net/J7szf/
Example 2: http://jsfiddle.net/J7szf/1/

You can probably use a popup near the "Show Details" Link
Example : http://jsfiddle.net/vdcUA/93/
If you want the content to be displayed in the table itself , provide here some idea on how u want the content displayed

In your example, you have an extra unneeded <tr> before your loop. You should have a standard table structure but hide / show the details depending on a click.
You'd better use:
styling with css and classes the standard row and the details
using js to hide / show rows
Actually, you could use jquery plugins to do this kind of stuff. See this example of datatables grouping rows
Jqgrid can also make some row grouping
[EDIT] The easiest way to define your HTML structure is to get inspired from the HTML in these jquery plugin examples

Related

Can you make 2 cell 1 on the other within one tr tag?

What I want is something like this:
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
</table>
which creates a table like this:
but what I want is something like this:
I know I can easily make it with adding a new row and using rowspan to fix it, but if there is another way to do it without adding another row, it will be so great
You can implement that using rowspan.
<table border="1">
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>
the answer I got after so many searches was this 2 without adding another Row:
adding both a2 a3 to another cell.
using grid system instead of table.
and there are other ways and the easiest ways is by adding another row, the code looks like this:
<table>
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>

Adding flags into tables dynamically

I was wondering if it is possible to add flags to the table dynamically. The countries listed below are just for examples but I want them to come out of a list and it should add the country flags dynamically next to a 3 char country code.
<table>
<thead>
<tr>
<th>Flag</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td></td>
<td>USA</td>
</tr>
<tr>
<td></td>
<td>GER</td>
</tr>
<tr>
<td></td>
<td>CHI</td>
</tr>
</tbody>
</table>
If it is possible, can someone help me, point me in a direction from which I can find a solution to this?

Html table with yes/no data?

I need to create an HTML table for a website that has binary yes/no data. I also need a 'yes' to be styled with a tick.
For instance Billy does have a drivers licence, but does not live in London. I need my table to look like this:
Is this a semantically correct solution?
http://jsfiddle.net/
<table>
<thead>
<tr>
<th>Name</th>
<th>Has drivers licence?</th>
<th>Lived in London?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Billy</td>
<td>Yes</td>
<td></td>
</tr>
<tr>
<td>Alex</td>
<td></td>
<td>Yes</td>
</tr>
<tr>
<td>John</td>
<td>Yes</td>
<td></td>
</tr>
</tbody>
</table>
Would it still be semantically correct to use ✓ instead of 'Yes'? I need this data to be editable by the CMS so I cant style the tick with a CSS class.
You could use the abbr tag, to describe the ✓ for screenreaders..
<td><abbr title="Yes">✓</abbr></td>
Here is another Question concerning this issue:
How to target a braille / screen-reader via CSS

Two columns in a table

I'm trying to figure out how it is possible to construct a table with two columns (left and right) so that when left column' content ends the right column takes over it (see example).
I'm sure there's a way to do it without floats but correct me if I'm wrong.
Use colspan like this:
<table>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td colspan="2">ab3</td>
</tr>
<tr>
<td colspan="2">ab4</td>
</tr>
</table>

HTML Table issue

I have a HTML table issue that I'd like to understand better.
Let's assume that I have a 3 row HTML
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
With a very long text, the contents in the first 2 rows appear like they are nearly centered. However, if I move the whole "A very long string" <td> into a separate <table> inside the row, I see that the other content doesn't center. Why is the display different when the <td> content is inside another table?
If your question ends up with 2 tables, with the original like this:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
</table>
And the looooong text into its own:
<table>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
Then the reason why the first two lines of the first table no longer look like they're centred is because they're not - ONLY if you're comparing relative to the second table.
If you debug with border="1" in your TABLE attributes, you will see that the table that they are contained in collapses to the widest possible table data cell. Because of this, they don't look like they're centred, even though they still are.
Add some arbitrary width to the first table and you will see that they are still centred.
Can you please provide your second example? When I created the following, it still looked the same. There's a chance you didn't properly embed the table within a table cell with a colspan of 2.
<table border="1">
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">
<table border="1"><tr>
<td>A very loooooooong string here</td>
</tr></table>
</td>
</tr>
</table>
When explaining an issue with HTML, it is best to indicate which browsers were used to test...
Anyway, I did a quick test with FF3 and IE6, and I don't see the behavior you describe: with nested table, the long string has slightly more padding but the other content is still visually centered.
You should show your other code. Mine is:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
</tr>
</table>
I think I know what you mean, is the second part of your question based on:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<table><td colspan="2">A very loooooooong string here</td></table>
</tr>
</table>
then I guess the reason the table contents are rendered left-aligned is that the inner table tags are hiding the colspan from the outer table.
The answer is to stop using html to style your table and to use CSS instead!