Adding flags into tables dynamically - html

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?

Related

Making a table responsive using CSS

I have a table to represent some data in html page.I'm trying to make this table as responsive by CSS.
<table>
<tr>
<thead>
<th>Name</th>
<th>Age</th>
<th>Tell</th>
</thead>
<tbody>
<tr>
<td>Maya</td>
<td>22</td>
<td>2222555666</td>
</tr>
</tbody>
</tr>
</table>
I used to to do that by this way:
table thead {display:none}
table tr, table td{display:block}
table td:nth-of-type(1)::before {content: "Name";}
There is a problem, this way can be helpful when I know there are how many <td></td> and what the content of <th></th> is , but in this case I do not know the number of <td></td> and also the content of <th></th>?
What can I do?

Accessible table with Vertical and Horizontal Headers

I'm working on a table that looks similar to my example below where X's in cells denote certain criteria based on the intersection of the respective horizontal/vertical headings.
For instance, in this situation an orange would have the qualities of "sweet" and "sour" but not salty or bitter.
<table>
<tr>
<th></th>
<th scope="col">Sweet</th>
<th scope="col">Sour</th>
<th scope="col">Salty</th>
<th scope="col">Bitter</th>
</tr>
<tr>
<th scope="row">Apple</th>
<td>x</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Orange</th>
<td>x</td>
<td>x</td>
<td></td>
<td></td>
</tr>
</table>
What would be the appropriate way to mark this up so that it is semantic and accessible? It seems as if cells should contain something more extensive than just an "X" to be meaningful, even if visually it just shows an "X".
Also, should the visibly empty cells actually contain some visually hidden text that states that said cell is not applicable?
I would assume that "Yes" and "No" are great indicators, but do require some context (i.e scrolling to the heading of the table)
Having the text "sweet" "sour" "salty" or "bitter" is also an evident choice that would perfectly fit.
Everybody hates ticks in a consecutive table columns which do require a lot of attention.
<table>
<tr>
<th scope="row">Apple</th>
<td>Sweet</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Orange</th>
<td>Sweet</td>
<td>Sour</td>
<td></td>
<td></td>
</tr>
</table>

Create a search bar to search value from table in HTML

I am trying to create a search bar to search values from tables.
Below is my html table code. But I don't know how to create a search bar in html to search values. Please see picture what I am trying to achieve. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>Customer Data</h1>
<table border="1">
<tr>
<th>Customer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
<th>Zip</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>C1121</td>
<td>James</td>
<td>Bill</d>
<td> Male </td>
<td>123456789</td>
<td>J#gmail.com</td>
<td></td>
<td> </td>
<td>09/02/1999</td>
</tr>
<tr>
<td>C54</td>
<td>Sarah</td>
<td>Sean</d>
<td> Female </td>
<td></td>
<td></td>
<td>abc street</td>
<td>00000</td>
<td>01/26/1992</td>
</tr>
</table>
</body>
</html>
You will need to use JavaScript to add filtering functionality via your search input. Unfortunately, there is no way to do what you want via HTML alone.
Here is a great link that details how to created a Filter/Search for HTML elements with some straightforward JavaScript and no additional libraries. It seems to be exactly what you are looking for, though you will have to make some slight changes since you are wanting to filter table elements, and your rows are not associated with each other, which will make your solution more complex. But it's a good place to start.

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

strucure of component inside table 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