😅Div Table Full (ok)

😂 How to use the ‘display’ property to represent a table?

1. Not border

C:\xampp8\htdocs\testauth\public\dist\table.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodePen - Responsive Div Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .table {
      display: table;
      text-align: center;
      width: 60%;
      margin: 10% auto 0;
      border-collapse: separate;
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
    }
    .table_row {
      display: table-row;
    }
    .theader {
      display: table-row;
    }
    .table_header {
      display: table-cell;
      border-bottom: #ccc 1px solid;
      border-top: #ccc 1px solid;
      background: #bdbdbd;
      color: #e5e5e5;
      padding-top: 10px;
      padding-bottom: 10px;
      font-weight: 700;
    }
    .table_header:first-child {
      border-left: #ccc 1px solid;
      border-top-left-radius: 5px;
    }
    .table_header:last-child {
      border-right: #ccc 1px solid;
      border-top-right-radius: 5px;
    }
    .table_small {
      display: table-cell;
    }
    .table_row>.table_small>.table_cell:nth-child(odd) {
      display: none;
      background: #bdbdbd;
      color: #e5e5e5;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .table_row>.table_small>.table_cell {
      padding-top: 3px;
      padding-bottom: 3px;
      color: #5b5b5b;
      border-bottom: #ccc 1px solid;
    }
    .table_row>.table_small:first-child>.table_cell {
      border-left: #ccc 1px solid;
    }
    .table_row>.table_small:last-child>.table_cell {
      border-right: #ccc 1px solid;
    }
    .table_row:last-child>.table_small:last-child>.table_cell:last-child {
      border-bottom-right-radius: 5px;
    }
    .table_row:last-child>.table_small:first-child>.table_cell:last-child {
      border-bottom-left-radius: 5px;
    }
    .table_row:nth-child(2n+3) {
      background: #e9e9e9;
    }
    @media screen and (max-width: 900px) {
      .table {
        width: 90%
      }
    }
    @media screen and (max-width: 650px) {
      .table {
        display: block;
      }
      .table_row:nth-child(2n+3) {
        background: none;
      }
      .theader {
        display: none;
      }
      .table_row>.table_small>.table_cell:nth-child(odd) {
        display: table-cell;
        width: 50%;
      }
      .table_cell {
        display: table-cell;
        width: 50%;
      }
      .table_row {
        display: table;
        width: 100%;
        border-collapse: separate;
        padding-bottom: 20px;
        margin: 5% auto 0;
        text-align: center;
      }
      .table_small {
        display: table-row;
      }
      .table_row>.table_small:first-child>.table_cell:last-child {
        border-left: none;
      }
      .table_row>.table_small>.table_cell:first-child {
        border-left: #ccc 1px solid;
      }
      .table_row>.table_small:first-child>.table_cell:first-child {
        border-top-left-radius: 5px;
        border-top: #ccc 1px solid;
      }
      .table_row>.table_small:first-child>.table_cell:last-child {
        border-top-right-radius: 5px;
        border-top: #ccc 1px solid;
      }
      .table_row>.table_small:last-child>.table_cell:first-child {
        border-right: none;
      }
      .table_row>.table_small>.table_cell:last-child {
        border-right: #ccc 1px solid;
      }
      .table_row>.table_small:last-child>.table_cell:first-child {
        border-bottom-left-radius: 5px;
      }
      .table_row>.table_small:last-child>.table_cell:last-child {
        border-bottom-right-radius: 5px;
      }
    }
  </style>
</head>
<body translate="no">
  <div class="table" id="results">
    <div class="theader">
      <div class="table_header">Header One</div>
      <div class="table_header">Header Two</div>
      <div class="table_header">Header Three</div>
      <div class="table_header">Header Four</div>
    </div>
    <div class="table_row">
      <div class="table_small">
        <div class="table_cell">Header One</div>
        <div class="table_cell">-1.2726</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Two</div>
        <div class="table_cell">0.1311</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Three</div>
        <div class="table_cell">-0.4782</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Four</div>
        <div class="table_cell">-0.9919</div>
      </div>
    </div>
    <div class="table_row">
      <div class="table_small">
        <div class="table_cell">Header One</div>
        <div class="table_cell">-0.89</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Two</div>
        <div class="table_cell">0.7986</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Three</div>
        <div class="table_cell">0.876</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Four</div>
        <div class="table_cell">0.498</div>
      </div>
    </div>
    <div class="table_row">
      <div class="table_small">
        <div class="table_cell">Header One</div>
        <div class="table_cell">-1.1669</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Two</div>
        <div class="table_cell">0.4949</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Three</div>
        <div class="table_cell">-0.7113</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Four</div>
        <div class="table_cell">0.434</div>
      </div>
    </div>
    <div class="table_row">
      <div class="table_small">
        <div class="table_cell">Header One</div>
        <div class="table_cell">0.1996</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Two</div>
        <div class="table_cell">-0.7693</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Three</div>
        <div class="table_cell">1.974</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Four</div>
        <div class="table_cell">-0.959</div>
      </div>
    </div>
    <div class="table_row">
      <div class="table_small">
        <div class="table_cell">Header One</div>
        <div class="table_cell">-1.5998</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Two</div>
        <div class="table_cell">-0.1149</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Three</div>
        <div class="table_cell">1.3888</div>
      </div>
      <div class="table_small">
        <div class="table_cell">Header Four</div>
        <div class="table_cell">-0.0689</div>
      </div>
    </div>
  </div>
</body>
</html>

2.1. Have border use display: table;

C:\xampp8\htdocs\testauth\public\dist\table.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rTable {
      display: table;
      width: 100%;
    }
    .rTableRow {
      display: table-row;
    }
    .rTableHeading {
      display: table-header-group;
      background-color: #ddd;
    }
    .rTableCell,
    .rTableHead {
      display: table-cell;
      padding: 3px 10px;
      border: 1px solid #999999;
    }
    .rTableHeading {
      display: table-header-group;
      background-color: #ddd;
      font-weight: bold;
    }
    .rTableFoot {
      display: table-footer-group;
      font-weight: bold;
      background-color: #ddd;
    }
    .rTableBody {
      display: table-row-group;
    }
  </style>
</head>
<body>
  <div class="rTable">
    <div class="rTableHeading">
      <div class="rTableHead">
        Month
      </div>
      <div class="rTableHead">
        Expenses
      </div>
      <div class="rTableHead">
        Notes
      </div>
    </div>
    <div class="rTableBody">
      <div class="rTableRow">
        <div class="rTableCell">
          January
        </div>
        <div class="rTableCell">
          $20
        </div>
        <div class="rTableCell">
          Car repair
        </div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell">
          February
        </div>
        <div class="rTableCell">
          $130
        </div>
        <div class="rTableCell">
          Furniture
        </div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell">
          March
        </div>
        <div class="rTableCell">
          $30
        </div>
        <div class="rTableCell">
          Pool cleaning
        </div>
      </div>
    </div>
    <div class="rTableFoot">
      <div class="rTableHead">
        Sum
      </div>
      <div class="rTableHead">
        $180
      </div>
      <div class="rTableHead">
        All done
      </div>
    </div>
  </div>
</body>
</html>

2.2. Have border use display: block;

C:\xampp8\htdocs\testauth\public\dist\table.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rTable {
      display: block;
      width: 100%;
    }
    .rTableHeading,
    .rTableBody,
    .rTableFoot,
    .rTableRow {
      clear: both;
    }
    .rTableHead,
    .rTableFoot {
      background-color: #DDD;
      font-weight: bold;
    }
    .rTableCell,
    .rTableHead {
      border: 1px solid #999999;
      float: left;
      height: 17px;
      overflow: hidden;
      padding: 3px 1.8%;
      width: 28%;
    }
    .rTable:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  </style>
</head>
<body>
  <div class="rTable">
    <div class="rTableHeading">
      <div class="rTableHead">
        Month
      </div>
      <div class="rTableHead">
        Expenses
      </div>
      <div class="rTableHead">
        Notes
      </div>
    </div>
    <div class="rTableBody">
      <div class="rTableRow">
        <div class="rTableCell">
          January
        </div>
        <div class="rTableCell">
          $20
        </div>
        <div class="rTableCell">
          Car repair
        </div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell">
          February
        </div>
        <div class="rTableCell">
          $130
        </div>
        <div class="rTableCell">
          Furniture
        </div>
      </div>
      <div class="rTableRow">
        <div class="rTableCell">
          March
        </div>
        <div class="rTableCell">
          $30
        </div>
        <div class="rTableCell">
          Pool cleaning
        </div>
      </div>
    </div>
    <div class="rTableFoot">
      <div class="rTableHead">
        Sum
      </div>
      <div class="rTableHead">
        $180
      </div>
      <div class="rTableHead">
        All done
      </div>
    </div>
  </div>
</body>
</html>

3. have border use display: table;

C:\xampp8\htdocs\testauth\public\dist\table.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>CodePen - Basic Div Table</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <style>
    .table {
      display: table;
      border-collapse: collapse;
    }
    .table .tr {
      display: table-row;
      border: 1px solid #ddd;
    }
    .table .tr:first-child {
      font-weight: bold;
      border-bottom: 2px solid #ddd;
    }
    .table .tr:nth-child(even) {
      background-color: #F9F9F9;
    }
    .table .tr .td {
      display: table-cell;
      padding: 8px;
      border-left: 1px solid #ddd;
    }
    .table .tr .td:first-child {
      border-left: 0;
    }
    .div-table,
    .table-tag {
      float: left;
      margin: 2em;
    }
    .div-table .title,
    .table-tag .title {
      text-align: center;
      padding-bottom: 0.5em;
    }
  </style>
</head>
<body>
  <div class="div-table">
    <div class="title">Table using div tags:</div>
    <div class="table">
      <div class="tr">
        <div class="td">Firstname</div>
        <div class="td">Lastname</div>
        <div class="td">Email</div>
      </div>
      <div class="tr">
        <div class="td">John</div>
        <div class="td">Doe</div>
        <div class="td">john@example.com</div>
      </div>
      <div class="tr">
        <div class="td">Mary</div>
        <div class="td">Moe</div>
        <div class="td">mary@example.com</div>
      </div>
      <div class="tr">
        <div class="td">July</div>
        <div class="td">Dooley</div>
        <div class="td">july@example.com</div>
      </div>
    </div>
  </div>
</body>
</html>

4. How to Create Responsive Tables using CSS without <table> Tag

Data representation is a crucial part on any website. If you have or manage a lot of data, but do not have a proper way to represent it, then it won’t be understood by anyone, and is of no value.

In most cases, tabular representation is an important type of data representation. Especially when it concerns statistical data.

In web design, tables are conventionally created using <table></table> tags. Creating a table is a bit of a challenging task, especially when the concern is making it responsive. And if you’re a WordPress developer then you might know, that many themes do not support responsive tables. Styling the tables is a challenge too, and there isn’t much option.

So, how can we overcome this problem? It’s very simple.

No, the solution is not JS..

You might be thinking that we need a jQuery plugin or JavaScript plugin to solve this issue. But it is not so. You do not need to install any plugin or additional framework. You can simply do this using the HTML <div> tag and some CSS styling.

Amazed?! Confused?! Don’t be! 😀

By the end of this article, you will be a master in creating good responsive HTML tables! I’ll guide you through the whole process.

So, it’s all about CSS?

Yes.

Using only CSS we can achieve this because of a special property provided. This styling is not used frequently used and hence many developers might not know about the same. We can use the display property and provide a width for all our divs to make them look like a table automatically.

How to use the ‘display’ property to represent a table?

The below table gives you the relation between a ‘table‘ tag and the corresponding supported CSS property to represent the same element. So, when creating a table, all you need to do is, instead of the HTML ‘table‘ tag, merely use the ‘div‘ tag and add the corresponding CSS to display a table.

Here’s an example to walk you through the process of creating a table.

Let’s begin.

Basically, a table has 3 primary parts namely the table header, table body and table footer. So first of all, let’s create a master div i.e. the main table div in which we will create a table.

Note: For the below steps, you need to add the HTML code in your template or a page on your website and the CSS code should be added in your theme’s style.css file.

Step 1: Create Master Div for the Table

HTML code

CSS code

Step 2: Add a Table Caption

HTML code

CSS code

Step 3: Create a Table Header Row

HTML code

CSS code

Step 4: Add Table Header Cells

HTML code

CSS code

Step 5: Create the Table Body

HTML code

CSS code

Step 6: Create Table Rows

HTML code

CSS code

Duplicate these rows as many times as you need to create a table as desired.

Step 7: Create Table Cells in the Rows

HTML code

CSS code

Copy these cells in each row you’ve created.

Step 8: Create the Table Footer

HTML code

CSS code

Step 9: Add Footer Cells

HTML code

CSS code

Once again, create as many cells as needed.

Time to Test

Now, you can check your code template by opening the HTML page in a browser. The result should be something around the lines of this:

What about responsiveness?

Now, you may be thinking how to make this table responsive?! But guys! You’ve already made the table responsive!

Don’t believe it?! Just check the responsiveness of the same page using developer tools or by resizing the window. Amazed?

All this is possible because of the ‘display’ properties you used. Intrinsically these properties are responsive. You just need to apply them properly. Rest all is taken care of by the browser and your stylesheet. 🙂

So go ahead, create tables and share your views with us. We’d like to see the tables you’ve created!

Psst: If you liked this, you will definitely find this guide beneficial – Fundamentals of Building a Successful Website. Do check it out!

PreviousTemplate Tiktok khamphukhoa.net.vn (ok)NextCoreui giao diện admin sử dụng bootstrap 5 (ok)

Last updated 1 year ago