CODEWITHSUNDEEP
html
Isiah
Isiah

Reputation: 315

How do you put <div> inside a table tag?

Like this:

<td align="center" width="352" valign="middle" bgcolor="#ffffff" c-style="whiteBG" 
<div="" class="sortable_inner ui-sortable" style="background-color: rgb(255, 255, 255);"
>
...
</td>

I saw this on website that works perfectly fine and in some places it works but in others it doesn't. How is the div inside the td tag?

Upvotes: 1

Views: 127

Answers (1)

Eduardo
Eduardo

Reputation: 294

Divs inside HTML tables are possible but they need to be inside of a table cell which also means that if you place them inside a td or th they will also work because both of these 2 are nested inside a cell.

What you need to do is just nest your div inside of a th, or td, in your example your'e only using a td. Also you have a few HTML syntax errors which I corrected. Hope this helps and I added an example using CSS Grid.

<table border=1 width=200 cellpadding=10>
<tr>
<td align="center" width="352" valign="middle" bgcolor="#ffffff" c-style="whiteBG">
 <div class="sortable_inner ui-sortable" style="background-color: rgb(255, 255, 255);">

<p> Your content goes here </p> 

</div> <!-- Div ends here -->

</td> <!-- Table cell ends here -->
</tr> <!-- Table row ends here -->
</table> <!-- Table element ends here -->

Using a div element inside a table and CSS Grid

    <style>
        tr {
            background-color: blue;
            height: 377px;
            width: 377px;
        }
        #div {
            background-color: black;
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-rows: 1fr 1fr;
            grid-template-columns: 1fr;
        }        
        p {
            color: white;
        }
    </style>
</head>

<body>
    <table width=200 cellpadding=10>
        <tr>
            <td>
                <div id="div">
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil enim dicta quasi? Perferendis rerum quas a dicta aperiam in ipsa voluptates at ipsum, ratione alias veritatis repellat dolore doloremque magnam. </p>
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ducimus temporibus velit! </p> 
                </div> <!-- Div ends here -->
        </td> <!-- Table cell ends here -->
    </tr> <!-- Table row ends here -->
    </table>
    </body>

Upvotes: 1

Related Questions