Таблица через div css

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?

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.

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

Step 2: Add a Table Caption

Step 3: Create a Table Header Row

Step 4: Add Table Header Cells

Step 5: Create the Table Body

Step 6: Create Table Rows

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

Step 7: Create Table Cells in the Rows

Copy these cells in each row you’ve created.

Step 8: Create the Table Footer

Step 9: Add Footer Cells

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!

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!

Comments

Why would you use the table tag markup to demonstrate a div table!
It’s a good thing the concept is sound.

Hi Ketan, Thanks for the response, I need a table with a fixed table header of height 60px and table body height should be fixed(100vh – 60px). If I’m having 100 rows, Now I want to scroll the rows which are in the table body(height (100vh – 60px)). I don’t want to scroll the whole table with the header. Thanks

Hi Ketan, I want to implement a scrollable table body with your example code could you help me in that. Thanks

Hello Srikanth, Thank you for visiting our blog! Could you please let us know what exact problem you are facing to make it scrollable?

I realize this is an old article but I really need this div table to work for me and I can’t seem to make your instructions work for me. Here is my html with inline css for you to look over and hopefully see what I am missing. Thanks in advance.
Paul Untitled Document
#resp-table width: 100%;
display: table;
>
#resp-table-caption display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
>
#resp-table-header display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
>
#resp-table-body display: table-row-group;
>
#resp-table-footer display: table-footer-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
color: rgba(255, 255, 255, 0.45);
>
.table-header-cell display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
>
.resp-table-row display: table-row;
>
.table-body-cell display: table-cell;
>
.table-footer-cell display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
> Responsive Div Table Responsive Table without Table tag Header 1 Header 2 Header 3 Header 4 Header 5 Cell 1–1 Cell 1–2 Cell 1–3 Cell 1–4 Cell 1–5 Footer 1 Footer 2 Footer 3 Footer 4 Footer 5

Hello Paul, Thank you for implementing through this article and apologize for the delayed response! Seems you have copied the CSS from my article only. Could you share your CSS and HTML files with us through the contact form?

Hi Ketan, It is possible to make table header position fix, because when data is too larger then need scroll table body without scrolling header. Thanks,
Vijaykumar

Hi Ketan, I am getting all headers, columns and cells are vertically aligned and doesn’t looks like a table format. Is there anything I am missing. I just copied all the CSS codes into my css file and html to my RazorView. Please help me anything I am missing and I am new to css? Thanks,
Bins

Hello Bins, Thank you for trying through this article! Could you please share me your html file and CSS file on [email protected] ?

Hi Ketan,
I have already sent the css and html file for your reference, please review and confirm me on the issues with fix to work as expected.
Thanks,
Bins

Hi Bins, I have replied you on the email as follows: Could you please send plain HTML file and the CSS code only with table css? And please give a try like this.
The double quotes are a bit different. Current double quotes are like this:

Thanks Ketan for the quick response. Issue is resolved and as per your review I can see my style sheet was not loading hence its not applied to my divs. Now its working fine…thanks a lot.

below is my html page code : #resp-table <
width: 100%;
display: table;
> #resp-table-caption <
display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
>
#resp-table-header <
display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
> .table-header-cell <
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
>
#resp-table-body <
display: table-row-group;
>
.resp-table-row <
display: table-row;
> .table-body-cell <
display: table-cell;
> Blog on Technologies Header 1 Header 2 Header 3 Cell 1–1 Cell 1–2 Cell 1–3 Cell 1–1 Cell 1–2 Cell 1–3

Hello, Thanks for reading and implementing this article! Could you please share your HTML code as well?

Источник

HTML Table Generator

Set up the options and click a box to generate a table!

Adjust your settings

Use the HTML editor and the interactive preview:

Generate HTML Div table grids for websites in just a few easy steps. Set the options then select the desired size.
Adjust the options in the interactive editors and don’t forget to add the supplied style snippets to your CSS file!

Settings

First you need to select whether you want to generate a standard HTML Table or you’d rather use styled Div blocks to layout the grid.
When the desired option has been set in the dropdown you can optionally specify up the remaining settings in the allocated boxes. You can choose the border in pixels, specify the width of the whole table in pixels or in percentage. The cell padding is another available option. Don’t worry if you’re looking for other settings, you can set these in the next step.

Create

To select the dimmensions of the table click or tap the desired cell on the grid next to the settings box. This will populate the editors below with the generated HTML code.

Adjust

You can make adjustments to your new table with the two interactive instant source editors where you can edit the code easily. The syntax higlighting and the text indenter of the code editor let you preview the markup.

CSS for Div Tables

Classic HTML tables don’t require an additional stylesheet in order to display the grid layout but Div tags do. The generator will provide you with the required CSS styles that you need to include in order to position the block elements correctly.

Источник

Как сделать таблицу при помощи DIVов

Довольно часто на различных сайтах надо вывести ту или иную информацию в виде таблице, причём не виде стандартной таблице где в первой колонке будет находится название чего либо а во всех остальных его параметры, а виде таблице когда вся информации по тому или иному объекту находится в одной ячейки, яркий пример такого это интернет-магазины и вывод товаров.

Каким образом можно сделать подобную разметку? Для того что бы получить такую вот картину

div id="content"> div> div>1 div/div> div>2 div/div> div>3 div/div> /div> div> div>1 div/div> div>2 div/div> div>3 div/div> /div> div> div>1 div/div> div>2 div/div> div>3 div/div> /div> /div> 

Здесь всё очень просто, есть один главный див, его а также есть три дива в нём, в каждом из трёх дивов есть ещё три дива. Главное в этом случае это css, который выглядит следующим образом:

#content margin: 0 auto; display: table; border-spacing: 15px; border: solid 3px red; width: 50%; > #content div  display: table-row; border: solid 1px green; > #content div div  display: table-cell; border: solid 1px navy; >

Главный див с id = content, центрирован при помощи margin:0 auto, также он имеет display:table, что позволяет ему использоваться как блочной таблице, то есть в этом случае див чем-то напоминает тег , при помощи команды border-spacing можно задать расстояние между ячейками в таблице, команда border задает цвет и размер границы дива.