😂
How to use the ‘display’ property to represent a table ? {display: table-header-group}
{display: table-row-group}
{display: table-footer-group}
{display: table-column-group}
1. Not border
C:\xampp8\htdocs\testauth\public\dist\table.html
Copy <! 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 1 px solid ;
border-top : #ccc 1 px solid ;
background : #bdbdbd ;
color : #e5e5e5 ;
padding-top : 10 px ;
padding-bottom : 10 px ;
font-weight : 700 ;
}
.table_header:first-child {
border-left : #ccc 1 px solid ;
border-top-left-radius : 5 px ;
}
.table_header:last-child {
border-right : #ccc 1 px solid ;
border-top-right-radius : 5 px ;
}
.table_small {
display : table-cell ;
}
.table_row > .table_small > .table_cell:nth-child ( odd ) {
display : none ;
background : #bdbdbd ;
color : #e5e5e5 ;
padding-top : 10 px ;
padding-bottom : 10 px ;
}
.table_row > .table_small > .table_cell {
padding-top : 3 px ;
padding-bottom : 3 px ;
color : #5b5b5b ;
border-bottom : #ccc 1 px solid ;
}
.table_row > .table_small:first-child > .table_cell {
border-left : #ccc 1 px solid ;
}
.table_row > .table_small:last-child > .table_cell {
border-right : #ccc 1 px solid ;
}
.table_row:last-child > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius : 5 px ;
}
.table_row:last-child > .table_small:first-child > .table_cell:last-child {
border-bottom-left-radius : 5 px ;
}
.table_row:nth-child ( 2n+3 ) {
background : #e9e9e9 ;
}
@media screen and ( max-width : 900 px ) {
.table {
width : 90 %
}
}
@media screen and ( max-width : 650 px ) {
.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 : 20 px ;
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 1 px solid ;
}
.table_row > .table_small:first-child > .table_cell:first-child {
border-top-left-radius : 5 px ;
border-top : #ccc 1 px solid ;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-top-right-radius : 5 px ;
border-top : #ccc 1 px 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 1 px solid ;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-bottom-left-radius : 5 px ;
}
.table_row > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius : 5 px ;
}
}
</ 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
Copy <! 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 : 3 px 10 px ;
border : 1 px 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
Copy <! 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 : 1 px solid #999999 ;
float : left ;
height : 17 px ;
overflow : hidden ;
padding : 3 px 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
Copy <! 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 : 1 px solid #ddd ;
}
.table .tr:first-child {
font-weight : bold ;
border-bottom : 2 px solid #ddd ;
}
.table .tr:nth-child ( even ) {
background-color : #F9F9F9 ;
}
.table .tr .td {
display : table-cell ;
padding : 8 px ;
border-left : 1 px solid #ddd ;
}
.table .tr .td:first-child {
border-left : 0 ;
}
.div-table ,
.table-tag {
float : left ;
margin : 2 em ;
}
.div-table .title ,
.table-tag .title {
text-align : center ;
padding-bottom : 0.5 em ;
}
</ 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>
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> 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 width
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.
{display: table-header-group}
{display: table-row-group}
{display: table-footer-group}
{display: table-column-group}
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
<div id=“resp-table”>
</div>
#resp-table {
width: 100%;
display: table;
}
Step 2: Add a Table Caption
<div id=“resp-table-caption”>
Responsive Table without Table tag
</div>
#resp-table-caption{
display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
}
<div id=“resp-table-header”></div>
#resp-table-header{
display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
}
<div class=“table-header-cell”>
Header 1
</div>
<div class=“table-header-cell”>
Header 2
</div>
<div class=“table-header-cell”>
Header 3
</div>
<div class=“table-header-cell”>
Header 4
</div>
<div class=“table-header-cell”>
Header 5
</div>
.table-header-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
Step 5: Create the Table Body
<div id=“resp-table-body”>
</div>
#resp-table-body{
display: table-row-group;
}
Step 6: Create Table Rows
<div class=“resp-table-row”>
</div>
.resp-table-row{
display: table-row;
}
Duplicate these rows as many times as you need to create a table as desired.
Step 7: Create Table Cells in the Rows
<div class=“table-body-cell”>
Cell 1–1
</div>
<div class=“table-body-cell”>
Cell 1–2
</div>
<div class=“table-body-cell”>
Cell 1–3
</div>
<div class=“table-body-cell”>
Cell 1–4
</div>
<div class=“table-body-cell”>
Cell 1–5
</div>
.table-body-cell{
display: table-cell;
}
Copy these cells in each row you’ve created.
<div id=“resp-table-footer”>
</div>
#resp-table-footer {
display: table-footer-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
color: rgba(255, 255, 255, 0.45);
}
<div class=“table-footer-cell”>
Footer 1
</div>
<div class=“table-footer-cell”>
Footer 2
</div>
<div class=“table-footer-cell”>
Footer 3
</div>
<div class=“table-footer-cell”>
Footer 4
</div>
<div class=“table-footer-cell”>
Footer 5
</div>
.table-footer-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
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
