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?
Related
I am trying to add multiple table cells elements under each of my heading cells but it isn't working.
Here is a screen for better understanding :
I would like to have for each of my category, say for example,
Category 1 : to have below "Brandon" others names like => Steph, Emily, John, etc.
So far I made with a line break but it doesn't work as expected: each item should be in a separated row.
<table>
<tr>
<th>Category 1</th>
<th>Category 2</th>
</tr>
<tr>
<td>Emil<br>Brandon</td>
<td>Tobias</td>
</tr>
</table>
Simply add another row.
<table>
<tr>
<th>Category 1</th>
<th>Category 2</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
</tr>
<tr>
<td>Brandon</td>
<td></td>
</tr>
</table>
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?
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.
Almost embarrassed to ask, because I have never had a need to use tables much before...
Now I have a project that will require massive organized tables, go figure.
Suppose I have a table like this:
<table border="1px" style="width:300px">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
First of all, from what I have read, <thead> and <tbody> seem to be optional for grouping purposes, but is this basic set up correct?
It looks fine when displayed in a browser, but I wonder if my code actually structures elements correctly in the DOM? I.E. does the DOM correctly associate the <th>First Name</th> with the <td>'s that contain the first name data? I ask because I am going to need to rely on that to sort the tables later with javascript.
I apologize if this is really simple question. If there is a reference to a "proper table structure" article, i will accept that as well.
Your HTML markup is fine, except you should favor CSS classes rather than inline styles, and the border attribute is usually better as a style.
If you are ever curious if you have valid markup, you can use a validator tool to check. There is one available here, provided by W3C: http://validator.w3.org/
HTML is a presentational markup. There is no data association implicit in any given element -- that is to say, the td which you know contains the first name does not in any way associate itself with the heading which labels it visually. As far as HTML is concerned, you don't have data, just a bunch of words which it shapes and boxes and moves around on the screen.
This extends to javascript -- there is no association between the heading and table cells in DOM.
That said, sorting tables are a very common UI pattern, and you can find a large number of examples as well as existing plugins. I highly recommend that you consider an established plugin if you are going to use this for anything other than a learning experience. The plugin author has, presumably, already considered all the many ins and outs, gotchyas, and cross-browser considerations that you would have to take in to account if you tried to craft your own.
Documentation
MDN Tables - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables
MDN <table> element - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
MDN HTMLTableElement - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
Best html table structure and css concept :
<table cellpadding="0" cellspacing="0" width="100%" class="table">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer1</th>
<th>Footer2</th>
<th>Footer3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
css code and structure
<style>
html, body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.table{border-collapse:collapse; width:100%}
.table thead th, .table tfoot th{text-align:center; background:#999; color:#FFFFFF;}
.table th, .table td{padding:5px; border:1px solid #ddd;}
.table tr:nth-child(even){background:#eee;}
</style>
I need add to some elements on top of a table in line with the columns of the said table.
This table contains a <thead> (which is required due to jquery.tablesorter plugin). I assumed that if I put another <tbody> on top of the <thead> I would be able to keep these elements in line with the rest of the columns, but both chrome and firefox render every <tbody> below the <thead>.
Example:
<table>
<tbody>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</tbody>
<thead>
<tr>
<th>head</th><th>head</th><th>head</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
Although I understand this, I still need to find a way to have these elements stay in line with specific columns.
You can use multiple rows in <thead> like this:-
<table>
<thead>
<tr> <td>1</td> <td>1</td> </tr>
<tr> <td>head</td> <td>head</td> </tr>
</thead>
</table>
I recommend that you use an id (#) marker to identify that part that you want the js to work off and have the js use that id.
With that, have the thead first and the tbody last.
The variations you are describing may work - in the browser you using now, on the OS you are ok - and may be compliant a certain version of the HTML spec- but putting things in an unusual order is (in my expereince) just the kind of thing to not work, or work the same, everywhere and to eventually be the cause of much frustration, especially as the site grows in complexity.
One solution is to use another table inside one tr, in your thead. Althought, this is a totally ugly solution.
You can also place a div above your table using CSS.
Correct table structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<thead> will always be on the top and <tfoot> will always be at the bottom.
Using jQuery you can swap <thead> and <tbody> content by:
$(document).ready(function() {
$('#myTrigger').click(function() {
var top = $('thead').html();
var mid = $('tbody').html();
$('thead').html(mid);
$('tbody').html(top);
});
});