how to use colspan in nested table - html

beginner here, i have a project that requires me to create an html table and insert data to it by columns, and not by rows, I was told that this can be achieved with nested table and the outer table will have one row that every cell in it is a table of its own, my issue with it is that I need the inner cells to colspan according to a variable of their duration and it Does not work on inner tables
my end goal is this:
enter image description here
I have tried to create nested tables and used colspan as follows:
<style>
th{
text-align: center;
}
table{
border-collapse:collapse;
}
</style>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>
thursday
</th>
<th>
wednesday
</th>
<th>
tuesday
</th>
<th>
monday
</th>
<th>
sunday
</th>
</tr>
</thead>
<tbody>
<tr>
<td >
<table class="table table-bordered">
<tr>
<td colspan="3">f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
</table class="table table-bordered">
</td>
<td>
<table class="table table-bordered">
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
</table >
</td>
<td>
<table class="table table-bordered">
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
</table>
</td>
<td>
<table class="table table-bordered">
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
</table>
</td>
<td>
<table class="table table-bordered">
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>f</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
i this possible with nested table? or is there any other method that I need to take like invert the table?


This is like Your output image, in this way you don't need nested table
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>
thursday
</th>
<th>
wednesday
</th>
<th>
tuesday
</th>
<th>
monday
</th>
<th>
sunday
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="background:blue">first activity</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="background:green" colspan="3">
second activity
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</body>

Related

Multiple rows in a td

I've spent some time figuring out how to do this, and I figured out I'm really not good at html tables..
Need help how to actually do this.
Here is my base code I'm stuck with, No need for the table header
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="3">
Physical Accomplishment
</td>
<td>Projected</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Actual</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Slippage</td>
<td>Weekly Cumulative</td>
</tr>
</tbody>
</table>
Here's what I'm aiming for:

Use rowspan 6 for the first column and rowspan 2 for the second and third column
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

I use LibreOffice to draw out the table, then export the HTML to produce this:
<table border="1" width="100%" height="300px">
<tr>
<td rowspan=6>Physical Accomplishment</td>
<td rowspan=2>Projected</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td rowspan=2>Actual</td>
<td rowspan=2>Weekly cumulative</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>I</td>
</tr>
<tr>
<td rowspan=2>Slippage</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>

You need to learn these 2 important attributes in HTML table, rowspan= and colspan=.
Please find this link for tutorial Tutorial link.
For now this what you need...
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

HTML Table -how to put multiple elements into a <td>?

How can I get "Change username", "Change password", and "delete user" to be positioned inline and get them under the "Actions" category?
<table>
<thead>
<tr>
<th>Username</th>
<th>Listings</th>
<th>Actions</th>
<tr>
</thead>
<tbody>
<tr>
<td>hi</td>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
<td>hi</td>
</tr>
<tr>
<td>
<a>ChangeUsername</a>
<a>ChangePassword</a>
<form>
<button>Delete User</button>
</form>
</td>
</tr>
</tbody>
</table>

inside tbody a <tr> should have 3 <td> like on thead
<table border="1">
<thead>
<tr>
<th>Username</th>
<th>Listings</th>
<th>Actions</th>
<tr>
</thead>
<tbody>
<tr>
<td>hi</td>
<td>ha</td>
<td>
<button>ChangeUsername</button>
<button>ChangePassword</button>
<button>Delete User</button>
</td>
</tr>
<tr>
<td>hi</td>
<td>hi</td>
<td>
<button>ChangeUsername</button>
<button>ChangePassword</button>
<button>Delete User</button>
</td>
</tr>
</tbody>
</table>

You need to put them in the third column.
I have also added a 4th column to put your delete user button
<table>
<thead>
<tr>
<th>Username</th>
<th>Listings</th>
<th>Actions</th>
<th></th>
<tr>
</thead>
<tbody>
<tr>
<td>hi</td>
<td>hi</td>
<td><p>ChangeUsername</p></td>
<td>
<form>
<button>Delete User</button>
</form>
</td>
</tr>
<tr>
<td>hi</td>
<td>hi</td>
<td><p>ChangePassword</p></td>
<td>
<form>
<button>Delete User</button>
</form>
</td>
</tr>
</tbody>
</table>

The best way to work with tables is to have the same amount of columns as you do headings for eg adapting your code above:
<table>
<thead>
<tr>
<th>Username</th>
<th>Listings</th>
<th>Actions</th>
<tr>
</thead>
<tbody>
<tr>
<td>hi</td>
<td>hi</td>
<td></td>
</tr>
<tr>
<td>hi</td>
<td>hi</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<a>ChangeUsername</a>
<a>ChangePassword</a>
<form>
<button>Delete User</button>
</form>
</td>
</tr>
</tbody>
</table>
This will show two blank cells then whatever you put in the third (actions headed) cell.

How can I merge row and column in HTML as the picture below?

How can I merge row and column as the figure blow in HTML?

After trying many times, I found the solution.
<table border="1">
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Province</td>
<td colspan="2">Level</td>
<td>Other</td>
</tr>
<tr>
<td colspan="2">XL</td>
<td></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>001</td>
<td>Province #1</td>
<td>5</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td>002</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

How to merge fields into box in table on right side?

I have to create table similar to this
so I've created following table structure in HTML
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2" rowspan="4">left box</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2" rowspan="5">right box</td>
</tr>
</tbody>
The structure is simplified to show only general problem. Left box is working fine, but right is not.
Demo with only left: http://jsfiddle.net/rfDms/2/
Demo with left and right: http://jsfiddle.net/rfDms/
How to make similar table?

http://jsfiddle.net/AaGJ8/
<table width=100% border=1 class="table table-bordered">
<tbody>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td colspan="2" rowspan="4">box</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td colspan="2" rowspan="4">box</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
</tbody>

jsFiddle example
<table style="width: 100%">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="5"></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

How is make this html table?

I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/

Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE

<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>

Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>

Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>

<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...