Develop Reference

How do I left align the one table and right align the other table that uses the same class?

Initially, I can't change the class name for instance:
<table class="firsttable"> This is the firstable that must be left align
<tbody>
<tr>
<td>
<table class="firsttable"> And this is the second table that must be center align
<tbody>
<tr>
<td>
How do I code it in css?

You can use below CSS, It works as intended
<style>
.firsttable:nth-child(1) { text-align:left; }
.firsttable:nth-child(2) { text-align:right; }
</style>
It's CSS3 though.

First table CSS selector:
.firsttable:first-of-type
If second table is last:
.firsttable:last-of-type
Otherwise, second table CSS selector is this:
.firsttable:nth-of-type(2)

Use ids:
HTML:
<table class="firsttable" id="table1">
...
</table>
<table class="firsttable" id="table2">
...
CSS:
#table1 {
text-align:left;
}
#table2 {
text-align:right;
}
Does this work?

In this case it is better or from my sense I always make it by adding an inline style in the table and I think their no need to create any other style for it in CSS.
<table class="firsttable" style="text-align:left"> This is the firstable that must be left align
And the second table may be another inline style of text-align:center
<table class="firsttable" style="text-align:center"> And this is the second table that must be center align
It is the best approach. But you can also can create some different id here or
.firsttable:nth-child(1) { text-align:left; }
.firsttable:nth-child(2) { text-align:center; }
Problem in this is if you use it then if another table appear in this web page area than it will arise a problem. So it is better to use inline style in this case.

If you want to move the table to the left and one to the right add the following to the appropreate table.
For the align right. Add this at the opening tag <table>.
style="float:right;"
For the algin left add the same code to the exactly same place but change the "left" to "right" depending on where you want it to be.
To aling text do as the other people have seggested.
J. Carter :)

Angularjs highlighting columns ng-table

I am trying to figure out how I can highlight a column using ng-table directive for Angular. Though my understanding on this directive is that in the current setup it is not capable of achieving what I am looking to do, so I will have to modify it myself.
I'd like to know if anyone has had any success with getting table column highlighting working with angular sorting and ng-repeat, it doesn't necessarily have to be done with ng-table, but any example would be greatly appreciated.

In your table definition, add table-hover class, for example:
< table ng-table="myTable" class="table table-hover table-striped table-condensed table-bordered" >
Customize color in app.css
.table-hover > tbody > tr:hover {
background-color: #dadada;
}

Give your table a custom class:
<table ng-table="usersTable" class="table my-custom-table-class">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">{{user.name}}</td>
</tr>
</table>
Then, in the CSS add the following:
.my-custom-table-class tbody tr:hover {
background-color: #dddddd;
}
the #dddddd is the color of the highlight.

ol outside of table element

I just try a table with <ol> as list elements with which it is possible to insert new table row.
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<ol id="list">
<li><tr><td>row</td><td>row</td><td>row</td></tr></li>
</ol>
</tbody>
However, I have the problem that the element appear outside of my tables. When I add dynamically content via .append(), the formatting is not taken some elements gets removed.
Jsfiddle example
I want to use this solution for counting currently positions in an "container list".
I got a similar function like the example below for counting my lists, that's working great but the insert into the table does not work properly.
countinglists example: Nested ordered lists
Maybe its possible to achieve that counting syntax in a table without the <ol>? or is there any <ol> equivalent?

You need to do some reading on basic HTML: http://www.w3schools.com/html/html_tables.asp
Here is how it should look...
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody id="list">
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
</tbody>

In theory, you should be able to use CSS counters.
table {
counter-reset: myTableCounter;
}
thead th:first-child:before {
display: table-cell;
content: "";
}
tbody td:first-child:before {
display: table-cell;
counter-increment: myTableCounter;
content: counter(myTableCounter);
}
However, when I attempted to do that I found there were issues with display: table-cell generated content.
You may have to look at adding additional elements to the table to generate the content inside the first cell of each row.

My question is: what are you trying to achieve? Is this an exercise just to see how much can you stretch the HTML?
For your jsfiddle, the action associated to the click removes some of the HTML tags (at least on my browser) resulting in a <li>rowrowrow</li>, so you end up having a rather odd formatted-table. My renderer takes all <li> tags added by clicking as the content of a row; if you have only <li> tags, the dom parser will likely wrap them into a <ul> (it does on mine).
IMHO you don't need to use the ol to be able to count stuff. You can do it in jquery afaik. If you insist to use lists, then you probably need to style them and use e.g. divs inside (styled too). Emulating a table via a list and divs is madness imho :)
Update - for the hierarchical table
My idea would be to have something similar to this jsfiddle. I basically styled in the .sub and the .main classes. However, things get a bit more complex is you need to add some extra columns. In this case, you'd need something like a treetable.

Multiple TD after some TD move to new line

Hi I am generating a table dynamically and adding new TR and TD to it dynamically in the following manner.
$('#tableId').append('<tr><th colspan="2"></th>');
The above code is called only once in my code.
Then I am adding TD to it in the following manner:
var tempurl = 'http://google.com';
$('<td>').appendTo($('#tableId')).html("<a href='"+tempurl+"'>"+tempurl+"</a>");
The problem that I am facing is, all TD are getting aligned in one row(in the same line only) and my page width get increased by many times.
I tried adding css to table so that if table size exceed TD should go to next line:
max-width: 90%;
display: block;
and
display: inline;
but it is not working out for me.

Please code a correct static HTML table and then use this code to generate dynamically a still correct table.
Here's an example of such a table:
<table>
<caption>Google results</caption>
<thead>
<tr>
<th scope="col">Title and link</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Stack Overflow
</td>
<td>Stack Overflow is a website (...)</td>
</tr>
<tr>
<td>
Stack Exchange
</td>
<td>Stack Exchange is a website (...)</td>
</tr>
</tbody>
</table>
no need for a header cell spanning all rows: you probably intend it as a caption
in a vertical table, you should have a header cell (th) on top of each column, in thead element (I added scope="col" attribute for accessibility reasons. It'd be row if header cells were on left of each row. Don't use scope if you've colspan or rowspan somewhere)
in tbody element, one row (tr) per actual row
in each row, as many td elements as there are header cells (except if there are some colspan or rowspan)
EDIT: why do you have 2 different id? Confusing.

Adding table column dividers without distorting column data?

Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.
Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?
My table structure is pretty simple.
<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>

what you are searching for is a attribute for the tag and it is called rules:
http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html
<table rules="cols">
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.
EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).
EXAMPLE: http://jsbin.com/ixire

Using the cell border is one option you can use but there's another:
I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:
<style type="text/css">
table {
border:1px solid #ccc;
border-collapse:collapse;
}
.col {
border-right:10px solid blue;
}
</style>
<div id="tDiv">
<table border="1">
<colgroup class="col">
<col width="200" />
</colgroup>
<colgroup class="col">
<col width="200" />
</colgroup>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>one one</td>
<td>one two</td>
</tr>
</tbody>
</table>
</div>
I did not get a change to test in IE (any versions of it) though.

Generally done with border on the right (or left) of each cell.
This -> http://jsfiddle.net/XFtBR/ should give you a start point.