HTML Table Making - xhtml

For a sturdy guid I have to write an XHTML fragment that is a table of 3 rows. The first row has two elements 1 and 2. The second row has two elements 3 and 4. The final row has one element that spans both columns and contains the value 5. How would you do the last sentence(the final row)?
<table border="1">
<tr>
<td>1, 2</td>
</tr>
<tr>
<td>3,4</td>
</tr>
<tr>
<span><td>5</td></span>
</tr>
</table>


I think you wish to use the colspan attribute. Assuming that you want 1 and 2 in the first row to be in 2 different columns (Your code doesn't do this), what you need is something like this:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan = "2">5</td>
</tr>
</table>
If you do not understand this, please ask me again in the comments.


<table border="1">
<tr>
<td>1, 2</td>
</tr>
<tr>
<td>3,4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>
</table>
your code has only one column for 1,2 and 3,4 so your last row value cannot span to two columns. For that you have to modify it a bit
<tr>
<td>1 </td><td> 2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
</tr>

Related

How to make TD tag occupy entire space?

I'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>

You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>

How to get a table in bootstrap to have two columns and a row underneath

I'm using a ng-repeat to loop through some data to show on a table. I want the format to be 2 columns and 1 row under the 2 columns...
Right now I have:
<table class="table table-borderless table-striped">
<tbody>
<tr ng-repeat="file in files">
<td>{{file}}<br>
</td>
<td>{{file.name}}</td>
<td>{{file.error.message}}</td>
</tr>
</tbody>
</table>
For example:

Use ng-repeat-start and ng-repeat-end...
<tr ng-repeat-start="f in files">
<td>{{file}}</td>
<td>{{file.name}}</td>
</tr>
<tr ng-repeat-end="">
<td colspan="2">
{{file.error.message}}
</td>
</tr>
Demo (using sample user data)

How to select the last rowspan in a table?

I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.
Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
.myTable [rowspan]:last-of-type {
color: red;
}
I'm trying to to select the cell that contains "HEADER2".
Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!

You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.
.myTable tbody:last-of-type td[rowspan] {
color: red;
}
<table class='myTable' border='1'>
<tbody>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</tbody>
</table>

If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:
.myTable .lastRowspannedCell {
color: red;
}
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.
As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.

How to create table inside another table in bootstrap

How to create a table inside another table in Bootstrap-3. I tried but it displays after the first table.

You need to do as below
<table class="table table-bordered">
<th colspan="3">Outer Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>
<table class="table table-bordered">
<th colspan="3">Inner Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>This is row one, column 3</td>
</tr>
</table>
</td>
</tr>
</table>
Demo : http://jsbin.com/qilebevo/1/

align text outside table with column in table in CSS

I have a table with 9 columns, and under column 8, I want to print that column's total (which I have stored in a variable). How do I align the text so that it appears under column 8?
I currently have the total in a h5 tag, but if that prevents the alignment, I'm willing to change it.
<table> ...stuff
</table>
<h5>TOTAL!</h5> <---- this should appear under column 8 of the table

The best route would be to have it in the table itself however if that isn't an option, align your h5 by using javascript. Get the x offset of column 8 and apply that value to your h5. If you can provide a more full example of your markup I can provide an example.
Edit:
Since you didn't provide markup I created an example. You should be able to apply the gist of it to your code.
html
<table>
<thead>
<tr>
<td>head 1</td>
<td>head 2</td>
<td id="totalcol">head 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</tbody>
</table>
<p id="total">Some total</p>
js
var left = $('#totalcol').offset().left;
$("#total").css("margin-left",left);
http://jsfiddle.net/H62wV/

Assuming all columns are of equal width:
.p9 { /* p9 for 9 column table of equal width */
width: 11%;
}
h5 {
margin-left: 88%; /* 11 x 8 */
}
<table>
<tr>
<td class="p9">
...
</td>
</tr>
</table>
<h5>TOTAL!</h5>

Is your table an actual HTML table or CSS divs behaving like a table?

I believe that if you are going the table way, you should take it till the end.
To show a third column total, I would do:
<TABLE>
<THEAD>
<TR>
<td>head 1</td>
<td>head 2</td>
<td>head 3</td>
</tr>
</THEAD>
<TFOOT>
<TR>
<td></td> <<-- notice the empty cells
<td></td>
<td>TOTAL</td>
</tr>
</TFOOT>
<TBODY>
<TR>
<td>body 1</td>
<td>body 2</td>
<td>body 3</td>
</tr>
</TBODY>
</TABLE>
This way the alignment is automatic.
(Notice that the footer recomended position is before the body)

Resources