How do we merge column in HTML?
This is what I trying to achieve:
Here's my code:
<table style="width:100%" border="2px">
<tr>
<th>Daftar Lowongan Kerja</th>
<th>Daftar Pelamar Kerja</th>
</tr>
<tr>
<td>1. Junior Web Developer</td>
<td>Januar Fahlevi</td>
</tr>
<tr>
<td>2. Senior Web Developer</td>
</tr>
<tr>
<td>3. Junior Java Developer</td>
</tr>
</table>
I'm new in HTML and confused how to achieve this. I only can make 2 column, and stuck on how to create the |S1|20 Th|Fresh Graduate|Detail row.
You must use the colspanattribute
<!DOCTYPE html>
<html>
<body>
<table style="width:100%" border="2px">
<tr>
<th>Daftar Lowongan Kerja</th>
<th colspan="3">Daftar Pelamar Kerja</th>
</tr>
<tr>
<td>1. Junior Web Developer</td>
<td colspan="3">Januar Fahlevi</td>
</tr>
<tr>
<td>2. Senior Web Developer</td>
<td>Text Goes Here</td>
<td>Text Goes Here</td>
<td>Text Goes Here</td>
</tr>
<tr>
<td>3. Junior Java Developer</td>
<td colspan="2">Text Goes Here</td>
<td>Text Goes Here</td>
</tr>
</table>
</body>
</html>
Try with this one, as Bhargav said, you need to combine colspan and rowspan in order to achieve the desired table structure.
<!DOCTYPE html>
<html>
<body>
<table style="width:100%" border="2px">
<tr>
<th>Daftar Lowongan Kerja</th>
<th colspan="4">Daftar Pelamar Kerja</th>
</tr>
<tr>
<td rowspan="2">1. Junior Web Developer</td>
<td colspan="4">Januar Fahlevi</td>
</tr>
<tr>
<td>S1</td>
<td>20 th</td>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td rowspan="2">2. Junior Web Developer</td>
<td colspan="4">Januar Fahlevi</td>
</tr>
<tr>
<td>S1</td>
<td>20 th</td>
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>
Related
I need help at what codes they use on the image, thats all
Do you mean something like this?
May you have to add a border, but the skeletal structure ist given.
<table>
<tbody>
<tr>
<td>Purchased Equipments (June, 2006) </td>
</tr>
<tr>
<td rowspan="2">Item Num#</td>
<td rowspan="2">Item Pic</td>
<td>Item Description</td>
<td>Price</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>Expense</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Img 1</td>
<td>IBM Clone Computer</td>
<td>$ 400</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>$ 20</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">Img 2</td>
<td>1GB RAM Module for Computer</td>
<td>$ 50</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>$ 14</td>
</tr>
<tr>
<td>Purchased Equipments (June, 2006) </td>
</tr>
</tbody>
</table>
To get the exact representation , consider some fine tuning #laura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table</title>
</head>
<body>
<table border="3" cellspacing="5" bordercolor="grey" cellpadding="3">
<tr>
<td colspan="4">
<center><b>Purchased Equipments (June, 2006)</b></center>
</td>
</tr>
<tr>
<td rowspan="2"><b>Item Num#</b></td>
<td rowspan="2"><b>Item Picture</b></td>
<td>
<center><b>Item Description</b></center>
</td>
<td>
<center><b>Price</b></center>
</td>
</tr>
<tr>
<td><b>Shipping Handling, Installation, etc</b></td>
<td><b>Expense</b></td>
</tr>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2"><img height="80" width="100" src="lap.jpg"></img></td>
<td>IBM Clone Computer</td>
<td>$ 400.00</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>$ 20.00</td>
</tr>
<tr>
<td rowspan="2">2.</td>
<td rowspan="2"><img height="80" width="100" src="board-chip.jpg"></img></td>
<td>1GB RAM Module for Computer</td>
<td>$ 50.00</td>
</tr>
<tr>
<td>Shipping Handling, Installation, etc</td>
<td>$ 20.00</td>
</tr>
<tr>
<td colspan="4">
<center><b>Purchased Equipments (June, 2006)</b></center>
</td>
</tr>
</table>
</body>
</html>
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.
i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO
Hey guys I was creating this table table recently in HTML.
image:http://imgur.com/wPXCwrd
The table (shown in image) created perfectly but a weird blank row was created (marked red in image). When I tried to delete that code the entire cells below the QUESTIONS row gets shifted (image link:http://imgur.com/jBfmNGV).
How do I remove that blank cell after MEN cell?
CODE:
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Just remove the :
<td> </td>
so your final code will be :
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Preview: https://jsfiddle.net/3q6n9v7k/
A more correct answer would be the changing the rowspan and colspan.
Instead of
<tr>
<td rowspan="3">QUESTIONS</td> //
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
Do this
<tr>
<td rowspan="2">QUESTIONS</td>
<td colspan="2" rowspan="1">WOMEN</td>
<td colspan="2" rowspan="1">MEN</td>
</tr>
Also remove :
<tr>
<td> </td>
</tr>
check out Fiddle
I would like to make this table layout:
I have:
<table border="1">
<tr> <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr> <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>
but how can I make rest?
LIVE: http://jsfiddle.net/jsTvA/1/
Here it is:
Code: http://jsfiddle.net/jsTvA/14/
You could create a new table in a cell.
The way to approach the problem if you want a single table is:
Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
Make a simple table grid of this size.
Start setting colspan and rowspan on tds and removing the tds next to them.
Repeat this until you have the format you like.
The best i can:
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="3">aa</td>
</tr>
<tr>
<td>a</td>
<td> aa </td>
<td> aaa </td>
<td>lol</td>
<td>
<table border="1">
<tr>
<td colspan="3">
lol
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="10">
</td>
</tr>
</table>
http://jsfiddle.net/jsTvA/15/
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="5">aa</td>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td colspan="3">aa</td>
<td rowspan="3">aa</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
<tr>
<td colspan="8">aa</td>
</tr>
</table>
To make that structure you'll need to utilise the attribute colspan and rowspan.
Example.
To Make the following structure:
-------
|A |
-------
|X|Y|Z|
-----
| |1|2|
-------
use the code:
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td rowspan="2">X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
An alternative is as a previous post suggested, to add a nested table as follows:
<tr>
<td>A</td>
</tr>
<tr>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>|</td>
</tr>
</table>
</tr>
Personally I'd opt for the colspan route, but its really up to you.
Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.
You can try merging cells in excel and then convert it into html.
http://tableizer.journalistopia.com