How to Create Responsive Tables using CSS without Table Tag

 How to Create Responsive Tables using CSS without  Table Tag

Data representation could also be an important part on any website. If you've or manage plenty of knowledge , but do not have an accurate because of represent it, then it won’t be understood by anyone, and is of no value.

In most cases, tabular representation may be a crucial kind of data representation. Especially when it concerns statistical data.

In web design, tables are conventionally created using tags. Creating a table could also be a touch little bit of a challenging task, especially when the priority is making it responsive. And if you’re a WordPress developer then you'd possibly know, that tons of themes don't support responsive tables. Styling the tables could also be a challenge too, and there isn’t much option.

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

No, the solution isn't JS..

You might be thinking that we'd sort of a jQuery plugin or JavaScript plugin to unravel this issue. But it isn't so. you're doing not need to install any plugin or additional framework. you'll simply do this using the HTML tag and a couple of CSS styling.

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

So, it’s all about CSS?

Yes.

Using only CSS we'll achieve this thanks to a special property provided. This styling isn't used frequently used and hence many developers won't realize the same . we'll use the display property and provide a width for all our divs to make them appear as if a table automatically.

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

 {display:table}

 {display: table-row}

 {display: table-header-group}

 {display: table-row-group}

 {display: table-footer-group}

 {display: table-column}

 {display: table-column-group}

, {display: table-cell}

 {display: table-caption}

Here’s an example to steer you thru the tactic of creating a table.

Let’s begin.

 table body and table footer. So first of all, let’s create a master div i.e. the foremost table div during which we'll create a table.

Note: For the below steps, you'd wish to feature the HTML code in your template or a page on your website and thus 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

 #resp-table {

width: 100%;

display: table;

}

Step 2: Add a Table Caption

HTML code CSS code

Responsive Table without Table tag

 #resp-table-caption{

display: table-caption;

text-align: center;

font-size: 30px;

font-weight: bold;

}

Step 3: Create a Table Header Row

HTML code CSS code

 #resp-table-header{

display: table-header-group;

background-color: gray;

font-weight: bold;

font-size: 25px;

}

Step 4: Add Table Header Cells

HTML code CSS code

Header 1

Header 2

Header 3

Header 4

Header 5

 .table-header-cell{

display: table-cell;

padding: 10px;

text-align: justify;

border-bottom: 1px solid black;

}

Step 5: Create the Table Body

HTML code CSS code

 #resp-table-body{

display: table-row-group;

}

Step 6: Create Table Rows

HTML code CSS code

 .resp-table-row{

display: table-row;

}

Duplicate these rows as repeatedly as you'd wish to make a table as desired.

Step 7: Create Table Cells within the Rows

HTML code CSS code

Cell 1–1

Cell 1–2

Cell 1–3

Cell 1–4

Cell 1–5

 .table-body-cell{

display: table-cell;

}

Copy these cells in each row you’ve created.

Step 8: Create the Table Footer

HTML code CSS code

 #resp-table-footer {

display: table-footer-group;

background-color: gray;

font-weight: bold;

font-size: 25px;

color: rgba(255, 255, 255, 0.45);

}

Step 9: Add Footer Cells

HTML code CSS code

Footer 1

Footer 2

Footer 3

Footer 4

Footer 5

 .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 see 

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

What about responsiveness?

Now, you will be thinking the thanks 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 often often possible thanks to the ‘display’ properties you used. Intrinsically these properties are responsive. you simply 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 wish to ascertain the tables you’ve created!