Lynxsia IT Solution

CSS Display Table

When it comes to create table we think about <table> and its related elements. We did not think about using display property to create table.

The CSS display: table; property is rarely used and can be used to create table layout withuot the use of standard <table> elements.

Display Table Properties

display: table; To create table container like <table> element.

display: table-row; To create table row like <tr> element.

display: table-cell; To create table cell like <th> and <td> elements.

					 
        
          <!DOCTYPE html>
          <html>
            <head>
            <style>
              .table {
                display: table;
              }
              .row {
                display: table-row;
              }
              .cell {
                display: table-cell;
                padding: 10px;
              }
              .cell.heading {
                font-size: 20px;
                font-weight: bold;
              }
            </style>
          </head>
          <body>
            <div class="table">
              <div class="row">
                <div class="cell heading">First Name</div>
                <div class="cell heading">Last Name</div>
              </div>
              <div class="row">
                <div class="cell">John</div>
                <div class="cell">Doe</div>
              </div>
              <div class="row">
                <div class="cell">Mahesh</div>
                <div class="cell">Kumar</div>
              </div>
            </div>
          </body>
        </html>

Test Code Online

With Borders

					 
        
          <!DOCTYPE html>
          <html>
            <head>
            <style>
              .table {
                display: table;
                border-collapse: collapse;
              }
              .row {
                display: table-row;
              }
              .cell {
                display: table-cell;
                border: 1px solid red;
                padding: 10px;
              }
              .cell.heading {
                font-size: 20px;
                font-weight: bold;
              }
            </style>
          </head>
          <body>
            <div class="table">
              <div class="row">
                <div class="cell heading">First Name</div>
                <div class="cell heading">Last Name</div>
              </div>
              <div class="row">
                <div class="cell">John</div>
                <div class="cell">Doe</div>
              </div>
              <div class="row">
                <div class="cell">Mahesh</div>
                <div class="cell">Kumar</div>
              </div>
            </div>
          </body>
        </html>

Test Code Online

View CSS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on: