CODEWITHSUNDEEP
htmlcss
Prem
Prem

Reputation: 23

making a table using div in HTML

I want to make a table like this by using DIV in html & CSSdesired result but I am having a table like this gained result I tried but could not get the desired result. where I need to change my code? can anyone help me regarding this? 

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}
<div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>header-1</h2>
      </div>
      <div class="tableCell">
        <h2>header-2</h2>
      </div>
      <div class="tableCell">
        <h2>header-3</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="TableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="tableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="tableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 3483

Answers (3)

Jones Joseph
Jones Joseph

Reputation: 4938

Your HTML structure has a few errors.. You see.. the last cell has a whole table in it and so should your HTML structure have a whole table inside the last cell like this:

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}

.body {
  margin: 0px;
}
<div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
      <div class="tableRow">
        <div class="tableMain">
          <div class="tableBody">
            <div class="tableRow">
              <div class="tableCell">
                <h2>header-1</h2>
              </div>
              <div class="tableCell">
                <h2>header-2</h2>
              </div>
              <div class="tableCell">
                <h2>header-3</h2>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="TableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Upvotes: 1

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

you can try this

html

<div class="table">
<div class="table-row">
<div class="table-cell">Header1</div>
  <div class="table-cell">Header2</div>
</div>
  <div class="table-row">
  <div class="table-cell">section1</div>
    <div class="table-cell">
      <div>title</div>
      <div>description</div>
      <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item 3</li></ul>
    </div>
  </div>
  <div class="table-row">
  <div class="table-cell">Section2</div>
  <div class="table-cell">

    <div class="table">
    <div class="table-row">
    <div class="table-cell">

      Header 1
      <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    <div class="table-cell">
    Header 2
       <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    <div class="table-cell">
      header 3
       <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    </div>
    </div>

  </div>
  </div>
</div>

css

.table
{
  display:table;
  border:1px solid;
  width:100%;
  text-transform:capitalize;
}
.table-row
{
  display:table-row;
  border:1px solid;
}
.table-cell
{
  display:table-cell;
  vertical-align:middle;
  border:1px solid;
}

here is link for reference codepen link here

Upvotes: 0

scooterlord
scooterlord

Reputation: 15349

...this is the only drawback when using css to fake a table - you can't fake colspans and rowspans.

So, manually styling the exact table might be possible, but for dynamic content it wouldn't be that easy.

Actually this is why so many html elements exist - each one has its purpose. It looks like to me that the table is the most suitable to this case.

In case you are using divs in order to make the table responsive, you can do it the other way around - ie style table rows, table cells, etc to look like div elements when needed.

Upvotes: 0

Related Questions