CODEWITHSUNDEEP
htmlhtml-table
Jurudocs
Jurudocs

Reputation: 9175

How to add cells within column in html table?

I have trouble finding the right way to add cells into columns: Here is what I want to do:

enter image description here

A fiddle you get from : http://jsfiddle.net/AKrB3/

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center"  border="1">
                        <tr>
                            <td align="center">fasfg1
                            </td>
                            <td  width="42"></td>
                             <td align="center">fasfg2
                            </td>
                        </tr>
                    </table>
    </body>
</html>

Upvotes: 0

Views: 4146

Answers (3)

Brian
Brian

Reputation: 11

This is not a really great way to do it, but if you do it in one table, then you need separate rows for each cell and one for the rest of the items. To make the other side the same size, you must use rowspan. When you add a column, you would need to update the rowspan by one and make a new of the specific size you are inserting and remove it from the height specified by the last .

The better way to do this is by using separate tables for each band or a table inside a table.

<!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </head>
        <body>
            <table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center"  border="1">
                            <tr style="height:10px">
                                <td align="center">fasfg1</td>
                                <td width="42" rowspan="4"></td>
                                <td align="center" rowspan="4">fasfg2
                                </td>
                            </tr>
                            <tr style="height:10px">
                                <td align="center" height="5%">fasfg1</td>
                            </tr>
                            <tr style="height:10px">
                                <td align="center" height="5%">fasfg1</td>
                            </tr>
                            <tr style="height:100px">
                                <td align="center">fasfg1</td>
                            </tr>    
                        </table>
        </body>
    </html>​

Upvotes: 1

Laurent W.
Laurent W.

Reputation: 3783

Try this, with rowspan.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center"  border="1">
                    <tr>
                        <td align="center">fasfg1
                        </td>
                        <td  width="42" rowspan="3"></td>
                         <td align="center" rowspan="3">fasfg2
                        </td>
                    </tr>
                    <tr>
                        <td>zroizj</td>
                    </tr>
                    <tr>
                        <td>zroizj</td>
                    </tr>
                </table>
</body>
</html>

Note that it may be really hard to maintain this code if you want to add more rows in the left column in the future. It may be preferable to use 2 different tables.

Upvotes: 2

iMx
iMx

Reputation: 846

I would make one more table inside the left row and add the rows to the new table

Upvotes: 1

Related Questions