{"id":1221,"date":"2016-05-14T18:41:27","date_gmt":"2016-05-14T18:41:27","guid":{"rendered":"http:\/\/box.jharaphula.com\/?p=1221"},"modified":"2024-01-25T00:51:28","modified_gmt":"2024-01-25T06:21:28","slug":"create-div-based-css-table","status":"publish","type":"post","link":"https:\/\/jharaphula.com\/create-div-based-css-table\/","title":{"rendered":"How to Create div based CSS3 Table without using HTML5 Table tag?"},"content":{"rendered":"

Assume in your HTML page you are going to display 5000 records using a Table. In this case HTML table tag creates problem during loading. Until 5000 records fetched from the database, table will not render. This delay creates performance issue in web<\/a> development. To avoid this scenario div is introduced. Div loads faster then a table. Partial loading feature supported by div. While all the row & columns of a table comes with in the single control div presents each row & column independently. Let us share the example how to create div based CSS table.<\/p>\n

Look at the example below here I did created similar to table structure using Div & CSS. To make this simple I used only 3 CSS classes tableHeader, row & column. In HTML followed by the basic principle creating the row & inside row creating columns. To separate tableHeader in place of row class I used tableHeader.<\/p>\n

div based CSS Table Example<\/h2>\n
<!DOCTYPE html>\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<title>How to Create div based CSS3 Table?<\/title>\r\n<style type="text\/css">\r\n.tableHeader\r\n{\r\nbackground: #000;\r\ncolor: #fff;\r\ndisplay: table-row;\r\nfont-weight: bold;\r\n}\r\n\/* CSS styles of table Rows *\/\r\n.row\r\n{\r\ndisplay: table-row;\r\n}\r\n\/* CSS styles of table Columns *\/\r\n.column\r\n{\r\ndisplay: table-cell;\r\nborder: thin solid #000;\r\npadding: 6px 6px 6px 6px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class="tableHeader">\r\n<div class="column">Employee Name<\/div>\r\n<div class="column">Designation<\/div>\r\n<div class="column">Salary<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Biswabhusan Panda<\/div>\r\n<div class="column">Sr. Team Lead<\/div>\r\n<div class="column">80000 INR<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Supriti Kabi<\/div>\r\n<div class="column">Software Engineer<\/div>\r\n<div class="column">60000 INR<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Nibedita Panda<\/div>\r\n<div class="column">Jr. Software Engineer<\/div>\r\n<div class="column">45000 INR<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Ragini Sahoo<\/div>\r\n<div class="column">Mechanical Engineer<\/div>\r\n<div class="column">25000 USD<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Sonam Panda<\/div>\r\n<div class="column">Jr. Software Engineer<\/div>\r\n<div class="column">1500 USD<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Subha Roy<\/div>\r\n<div class="column">Software Engineer<\/div>\r\n<div class="column">17000 INR<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Mohini Srivastab<\/div>\r\n<div class="column">Mechanical Engineer<\/div>\r\n<div class="column">25000 INR<\/div>\r\n<\/div>\r\n<div class="row">\r\n<div class="column">Manjulata Panda<\/div>\r\n<div class="column">Business Head<\/div>\r\n<div class="column">5000 USD<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Another way to Create div based CSS3 Table<\/h2>\n
You must aware of 2 most wanted CSS3 properties float: left and float: right. Generally we use these syntax to place 2 or more div’s side-by-side. Using these properties you can create HTML Table like structue using div. Additionally, in this method you have to take care of clearfix. clearfix is a CSS class which comes with “clear: both;”.<\/p>\n","protected":false},"excerpt":{"rendered":"
Assume in your HTML page you are going to display 5000 records using a Table. In this case HTML table tag creates problem during loading….<\/p>\n","protected":false},"author":2,"featured_media":2174,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[36529,38495,38494,38496],"class_list":["post-1221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-code-tutorials","tag-advanced-css3","tag-css-table","tag-div-based-css-table","tag-how-to-create"],"yoast_head":"\nHow to Create div based CSS3 Table without using HTML5 Table tag?<\/title>\n<meta name=\"description\" content=\"Look at the example here I did created CSS table using div. This loads faster then a HTML Table. Here I used only 3 CSS classes tableHeader, row & column.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jharaphula.com\/create-div-based-css-table\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create div based CSS3 Table without using HTML5 Table tag?\" \/>\n<meta property=\"og:description\" content=\"Look at the example here I did created CSS table using div. This loads faster then a HTML Table. Here I used only 3 CSS classes tableHeader, row & column.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jharaphula.com\/create-div-based-css-table\/\" \/>\n<meta property=\"og:site_name\" content=\"OneStop Shop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tajinweb\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/panda.biswabhusan\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-14T18:41:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-25T06:21:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"478\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Biswabhusan Panda\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Biswabhusan Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/\"},\"author\":{\"name\":\"Biswabhusan Panda\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b\"},\"headline\":\"How to Create div based CSS3 Table without using HTML5 Table tag?\",\"datePublished\":\"2016-05-14T18:41:27+00:00\",\"dateModified\":\"2024-01-25T06:21:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/\"},\"wordCount\":728,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif\",\"keywords\":[\"Advanced CSS3\",\"CSS Table\",\"div based CSS Table\",\"How to Create\"],\"articleSection\":[\"CSS Tricks with Examples\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jharaphula.com\/create-div-based-css-table\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/\",\"url\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/\",\"name\":\"How to Create div based CSS3 Table without using HTML5 Table tag?\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif\",\"datePublished\":\"2016-05-14T18:41:27+00:00\",\"dateModified\":\"2024-01-25T06:21:28+00:00\",\"description\":\"Look at the example here I did created CSS table using div. This loads faster then a HTML Table. Here I used only 3 CSS classes tableHeader, row & column.\",\"breadcrumb\":{\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jharaphula.com\/create-div-based-css-table\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif\",\"width\":750,\"height\":478,\"caption\":\"How to Create div based CSS Table without using HTML Table tag?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jharaphula.com\/create-div-based-css-table\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jharaphula.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create div based CSS3 Table without using HTML5 Table tag?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jharaphula.com\/#website\",\"url\":\"https:\/\/jharaphula.com\/\",\"name\":\"OneStop Shop\",\"description\":\"Blog for SEO Guest Posting, Digital Marketing or Home Remedies\",\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jharaphula.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jharaphula.com\/#organization\",\"name\":\"OneStop Shop\",\"url\":\"https:\/\/jharaphula.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"width\":409,\"height\":91,\"caption\":\"OneStop Shop\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tajinweb\",\"https:\/\/x.com\/guestpostingopp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b\",\"name\":\"Biswabhusan Panda\",\"description\":\"Biswabhusan is the founder & CEO of JHARAPHULA. Over the last 3 years, he & his team has proved the way to turn blogging into a lucrative career choice. A blog scientist by mind and a passionate blogger by heart. His blog, JHARAPHULA is a platform of various interactive information.\",\"sameAs\":[\"https:\/\/jharaphula.com\",\"https:\/\/www.facebook.com\/panda.biswabhusan\"],\"url\":\"https:\/\/jharaphula.com\/author\/biswabhusan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create div based CSS3 Table without using HTML5 Table tag?","description":"Look at the example here I did created CSS table using div. This loads faster then a HTML Table. Here I used only 3 CSS classes tableHeader, row & column.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jharaphula.com\/create-div-based-css-table\/","og_locale":"en_US","og_type":"article","og_title":"How to Create div based CSS3 Table without using HTML5 Table tag?","og_description":"Look at the example here I did created CSS table using div. This loads faster then a HTML Table. Here I used only 3 CSS classes tableHeader, row & column.","og_url":"https:\/\/jharaphula.com\/create-div-based-css-table\/","og_site_name":"OneStop Shop","article_publisher":"https:\/\/www.facebook.com\/tajinweb","article_author":"https:\/\/www.facebook.com\/panda.biswabhusan","article_published_time":"2016-05-14T18:41:27+00:00","article_modified_time":"2024-01-25T06:21:28+00:00","og_image":[{"width":750,"height":478,"url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif","type":"image\/gif"}],"author":"Biswabhusan Panda","twitter_misc":{"Written by":"Biswabhusan Panda","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#article","isPartOf":{"@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/"},"author":{"name":"Biswabhusan Panda","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b"},"headline":"How to Create div based CSS3 Table without using HTML5 Table tag?","datePublished":"2016-05-14T18:41:27+00:00","dateModified":"2024-01-25T06:21:28+00:00","mainEntityOfPage":{"@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/"},"wordCount":728,"commentCount":0,"publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"image":{"@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif","keywords":["Advanced CSS3","CSS Table","div based CSS Table","How to Create"],"articleSection":["CSS Tricks with Examples"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jharaphula.com\/create-div-based-css-table\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/","url":"https:\/\/jharaphula.com\/create-div-based-css-table\/","name":"How to Create div based CSS3 Table without using HTML5 Table tag?","isPartOf":{"@id":"https:\/\/jharaphula.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage"},"image":{"@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif","datePublished":"2016-05-14T18:41:27+00:00","dateModified":"2024-01-25T06:21:28+00:00","description":"Look at the example here I did created CSS table using div. This loads faster then a HTML Table. Here I used only 3 CSS classes tableHeader, row & column.","breadcrumb":{"@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jharaphula.com\/create-div-based-css-table\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#primaryimage","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/css-table.gif","width":750,"height":478,"caption":"How to Create div based CSS Table without using HTML Table tag?"},{"@type":"BreadcrumbList","@id":"https:\/\/jharaphula.com\/create-div-based-css-table\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jharaphula.com\/"},{"@type":"ListItem","position":2,"name":"How to Create div based CSS3 Table without using HTML5 Table tag?"}]},{"@type":"WebSite","@id":"https:\/\/jharaphula.com\/#website","url":"https:\/\/jharaphula.com\/","name":"OneStop Shop","description":"Blog for SEO Guest Posting, Digital Marketing or Home Remedies","publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jharaphula.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jharaphula.com\/#organization","name":"OneStop Shop","url":"https:\/\/jharaphula.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","width":409,"height":91,"caption":"OneStop Shop"},"image":{"@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tajinweb","https:\/\/x.com\/guestpostingopp"]},{"@type":"Person","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/6e9804d6e96ca7218bf968283d69c01b","name":"Biswabhusan Panda","description":"Biswabhusan is the founder & CEO of JHARAPHULA. Over the last 3 years, he & his team has proved the way to turn blogging into a lucrative career choice. A blog scientist by mind and a passionate blogger by heart. His blog, JHARAPHULA is a platform of various interactive information.","sameAs":["https:\/\/jharaphula.com","https:\/\/www.facebook.com\/panda.biswabhusan"],"url":"https:\/\/jharaphula.com\/author\/biswabhusan\/"}]}},"_links":{"self":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/comments?post=1221"}],"version-history":[{"count":0,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1221\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media\/2174"}],"wp:attachment":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media?parent=1221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/categories?post=1221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/tags?post=1221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}