I have designed this table in figma and now I need to build it in HTML. However, I am not sure how to get the error message to span the table row below the cells like you can see in the image.

When I try to do it in my code below, the divs just disappear and the error message gets teleported above the table...

I have also thought of adding the error message as its own row, however, this is not entirely semantically accurate. More importantly, it would break the "rearrange" feature which I am also going to implement. If I drag one row somewhere else, the error message would end up out of place. So I would prefer keeping it all in one row if possible.

table {
  border-collapse: collapse;
}
td, th {
  border-bottom: 0.1rem solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

<table>
    <tr>
        <th></th>
        <th>Option Identifier</th>
        <th>Swatch</th>
    </tr>
    <tr>
        <div class="cell-container">
            <td>✋</td>
            <td><input type="text"></td>
            <td><input type="color"></td>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </tr>
    <tr>
        <div class="cell-container">
            <td>✋</td>
            <td><input type="text"></td>
            <td><input type="color"></td>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </tr>
</table>

I have designed this table in figma and now I need to build it in HTML. However, I am not sure how to get the error message to span the table row below the cells like you can see in the image.

When I try to do it in my code below, the divs just disappear and the error message gets teleported above the table...

I have also thought of adding the error message as its own row, however, this is not entirely semantically accurate. More importantly, it would break the "rearrange" feature which I am also going to implement. If I drag one row somewhere else, the error message would end up out of place. So I would prefer keeping it all in one row if possible.

table {
  border-collapse: collapse;
}
td, th {
  border-bottom: 0.1rem solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

<table>
    <tr>
        <th></th>
        <th>Option Identifier</th>
        <th>Swatch</th>
    </tr>
    <tr>
        <div class="cell-container">
            <td>✋</td>
            <td><input type="text"></td>
            <td><input type="color"></td>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </tr>
    <tr>
        <div class="cell-container">
            <td>✋</td>
            <td><input type="text"></td>
            <td><input type="color"></td>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </tr>
</table>

• html
• html-table

Share Improve this question Follow asked Nov 21, 2024 at 1:40 OscarOscar 59055 silver badges2121 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

When you are mixing div and td, you always have to follow the table, tr and td hierarchy. A div can only be placed inside a td, never the other way around.

A simple solution would be to create another table row. You can just give classes or other attributes to the tr tags. Hide the error message by default then, of course.

If content spans the whole row, add "rowspan" to a td to make it go across several or all tds of a row.

If you still must use a div, only use the div inside a td tag. Otherwise you must use different layout options.

Please check MDN: HTML table documentation for more info.

table {
  border-collapse: collapse;
}
td, th {
  border-bottom: 0.1rem solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

<table>
    <tr>
        <th></th>
        <th>Option Identifier</th>
        <th>Swatch</th>
    </tr>
    <tr class="cell-container">
        <td>✋</td>
        <td><input type="text"></td>
        <td><input type="color"></td>
    </tr>
    <tr class="cell-container error-container-row">
        <td colspan="3">
            Error Message
        </td>
    </tr>
    <tr class="cell-container">
        <td>✋</td>
        <td><input type="text"></td>
        <td><input type="color"></td>
    </tr>
    <tr class="cell-container error-container-row">
        <td colspan="3">
            Error Message
        </td>
    </tr>
</table>

While working on tabular format data you must follow the table tag. And if you want to have div inside a table it must be in table > tr > tbody > td hierarchy.

If you do not want table tag and want to add extra div you can create table by css and you can add div as per your requirement.

You can check the following example.

.caption    {display: table-caption}
.table {
  border-collapse: collapse;
  display: table;
}

.tr {display: table-row}

.thead  {display: table-header-group}
.tbody  {display: table-row-group}
.tfoot  {display: table-footer-group}

.col    {display: table-column}
.colgroup   {display: table-column-group}
.td, .th {
  display: table-cell;
  border-bottom: 0.1rem solid #ccc;
  padding: 0.5rem;
  text-align: left;
}

<div class="table">
    <div class="tr">
        <div class="th"></div>
        <div class="th">Option Identifier</div>
        <div class="th">Swatch</div>
    </div>
    <div class="tr">
        <div class="cell-container">
            <div class="td">✋</div>
            <div class="td"><input type="text"></div>
            <div class="td"><input type="color"></div>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </div>
    <div class="tr">
        <div class="cell-container">
            <div class="td">✋</div>
            <div class="td"><input type="text"></div>
            <div class="td"><input type="color"></div>
        </div>
        <div class="error-container">
            Error Message
        </div>
    </div>
</div>

Hope, this helps.