CODEWITHSUNDEEP
htmlcsshtml-table
JSEvgeny
JSEvgeny

Reputation: 2750

Nested table implementation

I have a problem with creating a table with "unusual" structure.

Here is what I've got so far

enter image description here

But I need "Description" table header to be the same size with elements above(Type, Year, Location, Postcode) and the "Price" should be exactly under "Date" so I was thinking about nested table solution.

Here is my html and fiddle

<table border="1">
    <tr>
        <td class="category">
            Picture
        </td>
        <td>
            <table class="ad-header" style="text-align: left;">
                <tr>
                    <th>Type</th>
                    <th>Year</th>
                    <th>Location</th>
                    <th>Postcode</th>
                    <th>Date</th>
                </tr>
                <tr>
                    <td>Volkswagen Passat Variant</td>
                    <td>2017</td>
                    <td>Uusimaa - Kerava</td>
                    <td>02650</td>
                    <td>15.12.2017</td>
                </tr>
            </table>
            <table class="ad-content" style="text-align: left;">
                <tr>
                    <th>Description</th>
                    <th>Price </th>
                </tr>
                <tr>
                    <td>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum, voluptates! Ea, voluptas, veritatis!
                    </td>
                    <td>
                        450€
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Upvotes: 0

Views: 97

Answers (3)

Grumpy
Grumpy

Reputation: 2253

<table border="1">
    <tr>
        <td rowspan="4" class="category">Picture</td>
        <td>Type</td>
        <td>Year</td>
        <td>Location</td>
        <td>Postcode</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Volkswagen Passat Variant</td>
        <td>2017</td>
        <td>Uusimaa - Kerava</td>
        <td>02650</td>
        <td>15.12.2017</td>
    </tr>
    <tr>
        <td colspan="4">Description</td>
        <td>Price</td>
    </tr>
    <tr>
        <td colspan="4">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste
            numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum,
            voluptates! Ea, voluptas, veritatis!
        </td>
        <td>
            450€
        </td>
    </tr>
</table>

Upvotes: 0

Terry
Terry

Reputation: 66228

Refactor your table so that type, year, location, postcode, date, description, and price are in the same table, but the latter two in a separate row. You use <th colspan="4"> and <td colspan="4"> for the table cells in description. See proof-of-concept example:

<table border="1">
  <tr>
    <td>
      Picture
    </td>
    <td>
      <table>
        <tr>
          <th>Type</th>
          <th>Year</th>
          <th>Location</th>
          <th>Postcode</th>
          <th>Date</th>
        </tr>
        <tr>
          <td>Volkswagen Passat Variant</td>
          <td>2017</td>
          <td>Uusimaa - Kerava</td>
          <td>02650</td>
          <td>15.12.2017</td>
        </tr>
        <tr>
          <th colspan="4">Description</th>
          <th>Price </th>
        </tr>
        <tr>
          <td colspan="4">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum, voluptates! Ea, voluptas, veritatis!
          </td>
          <td>
            450€
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 2

fernando
fernando

Reputation: 820

you need to use colspan. Check this link: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

Upvotes: 2

Related Questions