HTML colspan and rowspan issue
Multi tool use
HTML colspan and rowspan issue
I have an issue with HTML colspan & rowspan, I want to merge the first column (name) and last column (telephone) but it gave me unwanted result.
Here's what I want as result:
colspan
rowspan
Here what I got:
My code:
<table>
<tr>
<th colspan="3">Name</th>
<th rowspan="2">Age</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<th>First name</th>
<th>Middle name</th>
<th>Last name</th>
</tr>
<tr>
<th>pre</th>
<th>post</th>
</tr>
<tr>
<td>Jill</td>
<td>David</td>
<td>Smith</td>
<td>50</td>
<td>055</td>
<td>5778541</td>
</tr>
<tr>
<td>Roben</td>
<td>Jill</td>
<td>Adam</td>
<td>35</td>
<td>050</td>
<td>5577854</td>
</tr>
</table>
it's plain HTML, didn't use any CSS code.
– mona
Jun 30 at 12:02
3 Answers
3
change rowspan to colspan and fix the colspan's value
rowspan
colspan
<table border=1>
<tr>
<th colspan="3">Name</th>
<th colspan="1">Age</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<th>First name</th>
<th>Middle name</th>
<th>Last name</th>
<th></th>
<th>pre</th>
<th>post</th>
</tr>
<tr>
<td>Jill</td>
<td>David</td>
<td>Smith</td>
<td>50</td>
<td>055</td>
<td>5778541</td>
</tr>
<tr>
<td>Roben</td>
<td>Jill</td>
<td>Adam</td>
<td>35</td>
<td>050</td>
<td>5577854</td>
</tr>
</table>
Thanks for helping, your code gave me the wanted result, I made some changes because I wanted the age column to have more space so I added <th rowspan="2">Age</th> , then delete <th></th> that you added. and it worked as I want! thanks again.
– mona
Jun 30 at 11:52
Just Add 4 empty Heading Tag Before Pre&post
like this code:
<table>
<tr>
<th colspan="3">Name</th>
<th rowspan="2">Age</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<th>First name</th>
<th>Middle name</th>
<th>Last name</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>pre</th>
<th>post</th>
</tr>
<tr>
<td>Jill</td>
<td>David</td>
<td>Smith</td>
<td>50</td>
<td>055</td>
<td>5778541</td>
</tr>
<tr>
<td>Roben</td>
<td>Jill</td>
<td>Adam</td>
<td>35</td>
<td>050</td>
<td>5577854</td>
</tr>
</table>
Thanks for the help, but your code shows me an empty 3 rows below first, middle & last name. I found a solution by doing this: <tr> <th colspan="3">Name</th> <th rowspan="2">Age</th> <th colspan="2">Telephone</th> </tr> <tr> <th>First name</th> <th>Middle name</th> <th>Last name</th> <th>pre</th> <th>post</th> </tr>
– mona
Jun 30 at 11:58
From the second row you have to fill all coloms.
<table>
<tr>
<th colspan="3">Name</th>
<th rowspan="1">Age</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<th>First name</th>
<th>Middle name</th>
<th>Last name</th>
<th></th>
<th>pre</th>
<th>post</th>
</tr>
<tr>
<td>Jill</td>
<td>David</td>
<td>Smith</td>
<td>50</td>
<td>055</td>
<td>5778541</td>
</tr>
<tr>
<td>Roben</td>
<td>Jill</td>
<td>Adam</td>
<td>35</td>
<td>050</td>
<td>5577854</td>
</tr>
</table>
Many thanks for your help, as I mentioned above I wanted the age column to have more space so I added <th rowspan="2">Age</th> , then delete <th></th> that you added.
– mona
Jun 30 at 11:54
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Can you add the css you are using?
– Arex
Jun 30 at 8:57