We Keep Coding

Is it possible to use the style of Wikitable, including the sorting possibilities?

I would like to include to an html page a table that have the properties of the wikipedia tables: sortable, with little arrow next to the title that indicates the descending/ascending order.
Typically, in this extensive list of examples, I am looking for the simplest format:
https://en.wikipedia.org/wiki/Help:Sorting#Example
I was able to find a script to sort out my table, and I manually included the up/down arrow, but I was wondering whether one could import the script used by wikipedia pages, and then create tables using class="wikitable sortable".
Is it possible?
Here is the code to make the table:
<table class="wikitable sortable">
<tbody><tr>
<th>name
</th>
<th>data
</th>
<th>more data
</th></tr>
<tr>
<td>cats
</td>
<td>273
</td>
<td>53
</td></tr>
<tr>
<td>dogs
</td>
<td>65
</td>
<td>8,492
</td></tr>
<tr>
<td>mice
</td>
<td>1,649
</td>
<td>548
</td></tr></tbody></table>

how to put data in single line for 2 header tags html

I have below html code
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
The above data loads fine on page. 2 Headers with Month and Savings and two rows of data that i recieve from backend.
The problem occurs when i dont get any data from backend and i want to display error message on the first row. I am doing it as follows
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<td> No data to show because the request to load user info failed</td>
</table>
As you can see, i want to show error message <td> No data to show because the request to load user info failed on the first row. The problem is this data is getting wrapped up in the first column itself whereas i want this error message to spread across Month and Savings column.
Can anyone help me on how to achieve this ?

You still need to add tbody and tr, and you can use the colspan attribute on the td element to "merge" the columns. For example, colspan="2" makes a cell span two columns.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">No data to show because the request to load user info failed</td>
</tr>
</tbody>
</table>

Making one row with colspan first row of the Wordpress options page

In my WordPress options page, for creating fields I am using Fluent Framework. It is similar to Meta Box. So both of them use do_settings_fields function and the function generates the code like this:
<table class="form-table">
<tr>
<th scope="row">Header 1</th>
<td>Element 1</td>
</tr>
<tr>
<th scope="row">Header 2</th>
<td>Element 2</td>
</tr>
<tr>
<th scope="row">Header 3</th>
<td>Element 3</td>
</tr>
<tr>
<th scope="row">Header 4</th>
<td>Element 4</td>
</tr>
</table>
It looks like this:
In this table, I want to use firs row as a one row like this:
I creted a javascript file to fields/custom_html directory and hide scope with jQuery and enqueue the javascript file like this:
jQuery(document).ready(function()
{
jQuery('th[scope="row"]').first().hide();
});
But this doesn't completely solve my problem. Because I don't mind if I only use one row, but it's very problematic for multi-rows. Maybe I need to close the table tag and open a new table tag again, but I haven't been able to do this with my limited jQuery knowledge.

Merging two columns you have to use "colspan" attributes which can helpful, Here I am sharing the code for jquery.
$(document).ready(function(){
var $table_head = jQuery('tr').first();
var value = $table_head.text();
$table_head.html('<th colspan="2">'+value+'</th>');
});

sum of columns using ng-table angular

I am using angular/ng-table to plot numerical data in tabular form.
I am not able to figure out how to bring in a row at the end of my table which shows sum of all the values of each column.
I can compute the data on the server side and present it in the UI.
But is there a way to achieve this in ng-table/ng-grid?
Any help will be appreciated.
thanks

You mean something like this?
<table ng:init="stuff={items:[{description:'gadget', cost:99},{description:'thing', cost:101} ]}">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
<tr ng:repeat="item in stuff.items">
<td>{{item.description}}</td>
<td>{{item.cost}}</td>
</tr>
<tr>
<td></td>
<td>{{stuff.items.$sum('cost')}}</td>
</tr>

CSV to html table - client side

I have a table that I want to append variable data to. I currently have the data in CSV format, and call the csv to HTML using PHP. The PHP call $line_of_text[10] allows me to access whatever data I want. However I need to do it client side not server side.
I have been looking into Javascript arrays, and these may or may not be the best idea. If there is code to parse the data, I would also need the actual code to call it from the HTML page, and put it into the table.
My table is like this: ( see JS Fiddle: http://jsfiddle.net/72jQR/2/)
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Size</td>
</tr>
</table>
And After the information from the csv or array or whatever - it looks like this:
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
<td>From DATA 12345</td>
</tr>
<tr>
<td>Description</td>
<td>From DATA</td>
</tr>
<tr>
<td>Size</td>
<td>500</td>
</tr>
</table>
What is the best way to do this client side?

This jQuery plugin should do it for you client-side: http://code.google.com/p/js-tables/
In particular see this page with an example: http://code.google.com/p/js-tables/wiki/Table

There is a CSV to HTML online service at:
http://okfnlabs.org/blog/2013/12/05/view-csv-with-data-pipes.html
There is also a very simple, lightweight javascript library here you could use: https://github.com/okfn/csv.js (very few dependencies)