code reusability in HTML - html

I have three tables which are using using different variables for displaying the data.
Basic structure of the table
<table>
<thead>
<tr>
<th ng-repeat="var in array2"><i ng-show="array3[$index]=0"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="var in variable">
<td ng-repeat="var1 in var">{{var1.position}}</td>
</tr>
</tbody>
</table>
All the three tables are using different arrays for variable, array2 and array3. Is there any way I don't have to write the code thrice and I can loop the code for three tables.
Please suggest changes in data structures only when there are no other possible HTML solution to change it.

You need to check for directives, for instance <my-table-directive datas="array1"></my-table-directive>
This directive will hold the logic and templaces and you'll pass a variable to define the content.

Related

Markdown table rowspan without loss of formatting

As described in this and this answers, we can use HTML tags in Markdown to create tables with cells spanning multiple rows or columns. Suppose I want to make the following table (rendered by Visual Studio Code with extension "Markdown All in One"):
Desired Effect
But the problem for the second answer is that the rowspan/colspan of the first column/row will be rendered with a additional column/row in the front, as in the following example (does not work on StackOverflow, but works in VSCode; a work-around is to add an empty column/row, as suggested by the first comment in that answer, but this is still not perfect):
||Letter|Typesetting|Result|
|-|-|-|-|
|<td rowspan=4>a |Normal|a
||Italic|*a*|
||Bold|**a**|
||Math|$a$
Result:
Table constructed using method in Answer 2
Then we can use the HTML tags, as described by the first answer:
<table>
<thead>
<tr> <th>Letter <th>Typesetting <th>Result
</thead>
<tbody>
<tr> <td rowspan=4>a <td>Normal <td>a
<tr> <td>Italic <td>*a*
<tr> <td>Bold <td>**a**
<tr> <td>Math <td>$a$
</tbody>
</table>
But then Markdown formatting will be lost:
Table constructed using method in Answer 1
Is there any way to overcome this problem, i.e. using HTML tags to achieve rowspan/colspan without loss of Markdown text formatting?

Angular create table from json resulting in sorted headings

I have an angular app in which i am creating a table based on the json as follows:
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
Here the table creates the headings as well as the content from a json. But the result of this code is a table with sorted headings. Is there a way to keep the order the same as in the json file?
Your headers are in an object. JavaScript objects do not guarantee property order. See this question. To preserve order, you have to use an array in your JSON file.

Semantic of nested tables and table header

I have a table where elements can have child elements with the very same attributes, like:
ITEM ATTRIBUTE 1 ATTRIBUTE 2
item value value
sub value value
sub value value
item value value
From this I've created a markup like this:
<table>
<thead>
<tr>
<th>ITEM</th>
<th>ATTRIBUTE 1</th>
<th>ATTRIBUTE 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
<tr>
<td colspan=3>
<table>
<tbody>
<tr>
<td>sub</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
My questions are now:
Is this the best semantic solution?
Is another approach better suited? If so, which is the recommended way?
Is the table header in charge for both tables or do I have to create a new one (maybe with visibility: hidden for the nested table?
Is this the best semantic solution?
Not really. While the act of nesting an element A within another element B can be used to indicate that A is a child of B, that isn't what you're doing here: you're nesting the table within a completely different row, so there's no implication of a parent-child relationship between A and B.
By creating a cell that spans all the columns in the table and then building another table inside that with the same number of columns, you're also effectively saying "these are some other columns, that don't relate to the ones in the outer table".
You can see the implied (lack of) relationship between the columns by adding a border to the cells in your example above:
Obviously you can fix that with CSS, but the unstyled rendering of a piece of HTML is often a good guide to its semantics.
Is another approach better suited? If so, which is the recommended way?
There's no standard way to represent hierarchical relationships between rows of a table in HTML. Cribbing from an answer I gave to a similar question, though, you can do it with extra classes, ids and data- attributes:
<table>
<thead>
<tr>
<th>ITEM</th>
<th>ATTRIBUTE 1</th>
<th>ATTRIBUTE 2</th>
</tr>
</thead>
<tbody>
<tr id=100>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
<tr id=110 data-parent=100 class=level-1>
<td>sub</td>
<td>value</td>
<td>value</td>
</tr>
<tr id=200>
<td>item</td>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>
The parent-child relationship won't be visible in an unstyled rendering (there's no other way you could make it so without adding extra content, as far as I can see), but there are enough hooks to add the CSS required:
.level-1 > td:first-child {
padding-left: 1em;
}
... which results in this:
With a little javascript, you could also use the id and data-parent attributes to set things up so that e.g. hovering over a row causes its parent to be highlighted.
Is the table header in charge for both tables, or do I have to create a new one?
In your proposed solution, creating a single cell that spans all columns and then building another table inside it means that there's no implied relationship between the header cells and those of your "child" row. Obviously my suggested solution above doesn't have that problem.
This is W3C's recommendation:
At the current time, those who want to ensure consistent support across Assistive
Technologies for tables where the headers are not in the first row/column may want
to use the technique for complex tables H43: Using id and headers attributes to
associate data cells with header cells in data tables. For simple tables that have
headers in the first column or row we recommend the use of the th and td elements.
you can lock at this post: Best way to construct a semantic html table
hope that will help you to get your answer
Talking about semantics requires us to have more time than to find an answer for your question.
But for a whole point, this link should help you. That page contains all the information you may be interested in. Interestingly unlike normal 'declarative' spec w3c writes, it has 'suggestive' writing about the question in this context. You may wish to read right from the start.
I think putting the children in a separate table is the wrong way to go. Nested tables are not like nested lists; they don't carry that same semantic hierarchy. It seems everything should be within the same table if it all lists the same information.
For example, if your table had the headers
REGION POPULATION AREA
then you could have item1 = Earth, item2 = France, item3 = Paris... and it wouldn't really matter if France were a child of Earth or if Paris were a child of France; you'd still be better off keeping it all in one table and not trying to do a parent/child relationship other than in CSS styling.
If your table is really not comprehensible without someone knowing that parent/child relationship, could you give an example of the table data so I can better understand how to structure it?

Formatting of html tables in GSP

I am using Grails and I am currently faced with this problem.
This is the result of my html table
And this is my code from the gsp page
<tr>
<th>Device ID</th>
<th>Device Type</th>
<th>Status</th>
<th>Customer</th>
</tr>
<tr>
<g:each in = "${reqid}">
<td>${it.device_id}</td>
</g:each>
<g:each in ="${custname}">
<td>${it.type}</td>
<td>${it.system_status}</td>
<td>${it.username}</td>
</g:each>
</tr>
So the problem is, how do I format the table such that the "LHCT271 , 2 , Thomasyeo " will be shifted down accordingly? I've tried to add the <tr> tags here and there but it doesn't work.. any help please?
I think you problem is not in the view, but in the controller (or maybe even the domain). You must have some way of knowing that reqid and custname are related if they are in the same table. You must use that to construct an object that can be easily used in a g:each
You are looking for a way to mix columns and rows, and still get a nice table. I'm afraid that is not possible.
Edit
(Sorry, I just saw the last comment.)
You cannot mix two items in a g:each.
Furthermore, if the two things are not related you probably must not put them in the same table. There will be no way for you or for Grails, to know how to properly organize the information
Do you want to display the first reqid against the first custname (three fields), the second againts the second and so on? And are those collections of same length?
In such case you could try the following:
<tr>
<th>Device ID</th>
<th>Device Type</th>
<th>Status</th>
<th>Customer</th>
</tr>
<g:each var="req" in="${reqid}" status="i">
<tr>
<td>${req}</td>
<td>${custname[i].type}</td>
<td>${custname[i].system_status}</td>
<td>${custname[i].username}</td>
</tr>
</g:each>

GWT wrap a html table and add cels

I'm using gwt in my web app and I have a html panel which contains a <table>. I've chosen to do this instead of flextable due to some annoying issues when styling it as being unable to do <tbody valign="top">.
I wanted to know if it's possible to wrap a html table
<table>
<thead>
<tr>
<th>Name</th>
<th>Path</th>
<th>Type</th>
</tr>
</thead>
</table>
In a class like Flextable so I can easily control rows and columns through Java?
Something like
Label.wrap("id");
but for tables.
You can also format your data in FlexTable.
You can use flexTable.getRowFormatter(), flexTable.getColumnFormatter() or flexTable.getColumnFormatter().
You can apply alignment, style to rows, columns and cells using above FlexTable attributes.
Please provide a standalone test case if you are facing any problems with FlexTable.