Ads Top

How to create table in css?

 How to create table in css using div or li?

 We can create table with html and css this is totally depend on the display property. As display:table, display:table-row, display:table-cell. As our table structure table, row, td. Here are giving example both with div structure and li structure.



Table in css Example:-

 

Css-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>Table CSS</title>

    <link href="css-table.css" rel="stylesheet"/>

 

</head>

<body>

    <!-- Table structure with li -->

    <div class="table-css">

        <ul class="header-css">

            <li>Name</li>

            <li>Qulification</li>

            <li>Hobbies</li>

            <li>Others</li>

            <li>DOB</li>

        </ul>

        <ul>

            <li>Sheo</li>

            <li>MBA</li>

            <li>Surfing net Surfing net Surfing net Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsam quam, architecto soluta officiis, magnam molestias temporibus iure non beatae amet explicabo facilis in consequuntur omnis quia vero, exercitationem ipsa.</li>

            <li>blah - blah</li>

            <li>09/06/2016</li>

        </ul>

        <ul>

            <li>Raj</li>

            <li>MCA</li>

            <li>Playing Cricket</li>

            <li>Wow</li>

            <li>06/09/2050</li>

        </ul>

        <ul>

            <li>Mahesh</li>

            <li>Ba</li>

            <li>Surfing net</li>

            <li>blah - blah</li>

            <li>09/06/2020</li>

        </ul>

        <ul>

            <li>Shiv</li>

            <li>MCA</li>

            <li>Playing Cricket</li>

            <li>Wow</li>

            <li>06/09/2096</li>

        </ul>

    </div>

    <!-- Table structure with div -->

    <div class="table-css-div">

        <div class="rowTable header-css">

            <div class="columnTable">Name</div>

            <div class="columnTable">Qdivification</div>

            <div class="columnTable">Hobbies</div>

            <div class="columnTable">Others</div>

            <div class="columnTable">DOB</div>

        </div>

        <div class="rowTable">

            <div class="columnTable">Sheo</div>

            <div class="columnTable">MBA</div>

            <div class="columnTable">Surfing net Surfing net Surfing net Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae ipsam quam, architecto soluta officiis, magnam molestias temporibus iure non beatae amet explicabo facilis in consequuntur omnis quia vero, exercitationem ipsa.</div>

            <div class="columnTable">blah - blah</div>

            <div class="columnTable">09/06/2016</div>

        </div>

        <div class="rowTable">

            <div class="columnTable">Raj</div>

            <div class="columnTable">MCA</div>

            <div class="columnTable">Playing Cricket</div>

            <div class="columnTable">Wow</div>

            <div class="columnTable">06/09/2050</div>

        </div>

        <div class="rowTable">

            <div class="columnTable">Mahesh</div>

            <div class="columnTable">Ba</div>

            <div class="columnTable">Surfing net</div>

            <div class="columnTable">blah - blah</div>

            <div class="columnTable">09/06/2020</div>

        </div>

        <div class="rowTable">

            <div class="columnTable">Shiv</div>

            <div class="columnTable">MCA</div>

            <div class="columnTable">Playing Cricket</div>

            <div class="columnTable">Wow</div>

            <div class="columnTable">06/09/2096</div>

        </div>

    </div>

</body>

</html>

 

Css-table.css

body {

  margin0;

  padding0;

  border0;

  height100vh;

  font-familyArialHelveticasans-serif;

}

 

.table-css {

  displaytable;

  margin50px;

  border-left1px solid #ccc;

  border-top1px solid #ccc;

}

 

.table-css ul {

  margin0;

  padding0;

  list-stylenone;

  displaytable-row;

  background#fff;

  -webkit-transitionall 0.5s;

  transitionall 0.5s;

}

 

.table-css ul:nth-child(even) {

  background#eee;

}

 

.table-css ul:hover {

  background#f5f5f5;

  -webkit-transitionall 0.5s;

  transitionall 0.5s;

}

 

.table-css ul.header-css {

  background#0bf;

  color#fff;

  font-weight700;

}

 

.table-css ul li {

  displaytable-cell;

  border-bottom1px solid #ccc;

  border-right1px solid #ccc;

  padding5px 10px;

}

 

/*Through Div*/

.table-css-div {

  displaytable;

  margin50px;

  border-left1px solid #ccc;

  border-top1px solid #ccc;

}

 

.table-css-div .rowTable {

  margin0;

  padding0;

  list-stylenone;

  displaytable-row;

  background#fff;

  -webkit-transitionall 0.5s;

  transitionall 0.5s;

}

 

.table-css-div .rowTable:nth-child(even) {

  background#eee;

}

 

.table-css-div .rowTable:hover {

  background#f5f5f5;

  -webkit-transitionall 0.5s;

  transitionall 0.5s;

}

 

.table-css-div .rowTable.header-css {

  background#0bf;

  color#fff;

  font-weight700;

}

 

.table-css-div .rowTable .columnTable {

  displaytable-cell;

  border-bottom1px solid #ccc;

  border-right1px solid #ccc;

  padding5px 10px;

}

/*# sourceMappingURL=css-table.css.map */

 

 

If anyone want to using with sass or scss then use below sass file.

 

Css-table.scss

body{

    margin0;

    padding0;

    border0;

    height100vh;

    font-familyArialHelveticasans-serif;

}

.table-css{

    displaytable;

    margin50px;

    border-left1px solid #ccc;

    border-top1px solid #ccc;

    ul{

        margin0;

        padding0;

        list-stylenone;

        displaytable-row;

        background#fff;

        transitionall 0.5s;

        &:nth-child(even){

            background#eee;

        }

        &:hover{

            background#f5f5f5;

            transitionall 0.5s;

        }

        &.header-css{

            background#0bf;

            color#fff;

            font-weight700;

        }

        li{

            displaytable-cell;

            border-bottom1px solid #ccc;

            border-right1px solid #ccc;

            padding5px 10px;

        }

    }

}

/*Through Div*/

.table-css-div{

    displaytable;

    margin50px;

    border-left1px solid #ccc;

    border-top1px solid #ccc;

    .rowTable{

        margin0;

        padding0;

        list-stylenone;

        displaytable-row;

        background#fff;

        transitionall 0.5s;

        &:nth-child(even){

            background#eee;

        }

        &:hover{

            background#f5f5f5;

            transitionall 0.5s;

        }

        &.header-css{

            background#0bf;

            color#fff;

            font-weight700;

        }

        .columnTable{

            displaytable-cell;

            border-bottom1px solid #ccc;

            border-right1px solid #ccc;

            padding5px 10px;

        }

    }

}



No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.