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

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.

Related

how to use colspan in nested table

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>

How to separate nested table conspicuously?

How can i separate nested table in lower table as conspicuously as in upper table?
Upper table is not proper though.
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Here is my code:
.my-table {
border: 1px solid #000;
}
.my-table tr:nth-child(even) {
background: #ddd;
}
.my-table tr:nth-child(odd) {
background: #fff;
}
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
<td>Finance</td>
<td>Time 3</td>
<td>Time 5</td>
<td>Bad</td>
<td>Good</td>
</tr>
</table>
<table>
<tr>
<td>Crossroad</td>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
<td>Ok</td>
<td>danke</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody T</td>
<td>G</td>
<td>
<table>
<tr>
<td>Trades</td>
</tr>
<tr>
<td>Position</td>
</tr>
</table>
</td>
<td>Latest</td>
<td>TIME 1</td>
<td>TIME 2</td>
<td>Good</td>
<td>My Comments</td>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
</tr>
<tr>
<td>Crossroad</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Finance</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 3</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Time 5
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Bad</td>
</tr>
<tr>
<td>Ok</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Good</td>
</tr>
<tr>
<td>danke</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>

To answer the question:
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Vertically aligning your table cells will bring the content to the top of the cells, regardless of how many lines of content follows.
.my-table td {
vertical-align: top;
}
JSFiddle Example: https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/
Please let me know if I missed what you were trying to accomplish.

Create table within table in HTML

Below shows my HTML code & it's result.
<html>
<body>
<table width="75%">
<td>
<table width="99%" border="4">
<tr>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr>
<td>Dilantha</td>
<td>30</td>
</tr>
<tr>
<td>Chamal</td>
<td>25</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
</tr>
</table>
</td>
<td>
<table width="99%" border="4">
<tr>
<th>NAME</th>
<th>YEAR</th>
</tr>
<tr>
<td>Jhon</td>
<td>2010</td>
</tr>
</table>
</td>
</table>
</body>
</html>
But I need to show below result. Please help me to complete my HTML code.
Thank you.

I think you are expecting the following one right?
<html>
<body>
<table width="75%">
<td>
<table width="99%" border="4">
<tr><th > NAME </th>
<th > AGE</th>
</tr>
<tr>
<td>Dilantha</td>
<td>30</td>
</tr>
<tr>
<td>Chamal</td>
<td>25</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table width="99%" border="4">
<tr><th > NAME </th>
<th>YEAR</th>
</tr>
<tr>
<td>Jhon</td>
<td>2010</td>
</tr>
</table>
</td>
</table>
</body>
</html>

Try this code:
DEMO
<td style='vertical-align: top;'>

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...

Scrolling HTML Nested Tables

How can I make a table which has sub/nested tables scrollable if given a max height? I do not want the thead to scroll with it. What I'm really looking for is some valid tag that I can wrap my s in, or some other markup that will work just as well as the this:
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<!-- Insert valid tag here to wrap <tbody>s -->
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
</tr>
<tr class="sub-table">
<td colspan="2">
<table>
<thead>
<tr>
<th>Sub Column1</th>
<th>Sub Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub Val1</td>
<td>Sub Val2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- Insert valid close tag here -->
</table>

If I understand your question correctly, maybe try something like this: http://jsfiddle.net/pPuXL/1/
You need to display the TBODY elements as "block" or "inline-block" in order for overflow to work on it, as in the CSS example I posted.