JAMES JAMES - 6 months ago 7
HTML Question

How to make three cells in one cell in a table

I wrote this code but

<html>
<head>
<title></title>
</head>
<body>
<style>
table, th, td {
border: 1px solid black;
width: 700px;
margin: auto;
}

</style>
<table>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> a </td>
<td> </td>
<td> c </td>
</tr>
<tr>
<td> a </td>
<td> </td>
<td> c </td>
</tr>
</table>
</body>
</html>


when I run this code will show me like this

----------------------------------
|a | b | c |
----------------------------------
|a | | c |
----------------------------------
|a | | c |
----------------------------------


I do not appear like the above table

I want like the blew table how I can do that?
which is mean the middle cells become one cell.

----------------------------------
|a | b | c |
---------- ------------
|a | | c |
---------- ------------
|a | | c |
----------------------------------

Answer

You can use the attribute rowspan for the td with the b inside.

<table border="1">
    <tr>
        <td>a</td>
        <td rowspan="3">b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>c</td>
    </tr>
</table>

You can then add CSS to adjust it to the way you like it:

table{
    text-align: center;
    width: 100%;
}

Here's an example: https://jsfiddle.net/sntgoy5d/

If you want to have the b at the top of the cell, you can use the css property vertical-align and set it to top.

Comments