Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How create table without using tag?
A website's data representation is an essential component. If you have or manage a lot of data but don't know how to properly display it, users will not be able to understand it and it won't be of any use. Tabular representation is frequently a crucial kind of data presentation, particularly when it comes to statistical information. Tables are typically constructed in web design using the <table> tag, but creating responsive tables can be challenging with traditional table markup.
This article explores how to create table-like structures without using the <table> tag. This can be achieved using HTML <div> elements combined with CSS display properties, flexbox, or CSS Grid. These approaches offer better responsive design control and styling flexibility.
HTML <div> Tag
The <div> tag (division tag) is used to create sections for content such as text, graphics, headers, footers, and navigation bars. It has an opening <div> and closing </div> tag. This element is one of the most versatile tags in web development because it allows us to divide content on a web page and create specific sections for different types of data or functions.
Syntax
Following is the syntax for HTML <div> tag
<div> Content goes here </div>
Method 1: Using CSS Display Table Properties
The first approach uses CSS display properties that mimic traditional table behavior. We use display: table for the container, display: table-row for rows, and display: table-cell for individual cells.
Example
Following example creates a table structure using <div> tags with CSS table display properties
<!DOCTYPE html>
<html>
<head>
<title>CSS Table Display Method</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.table {
display: table;
width: 100%;
border-collapse: collapse;
border: 2px solid #4CAF50;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.table-header {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Student Information</h2>
<div class="table">
<div class="table-row table-header">
<div class="table-cell">Name</div>
<div class="table-cell">Age</div>
<div class="table-cell">Course</div>
</div>
<div class="table-row">
<div class="table-cell">John Doe</div>
<div class="table-cell">22</div>
<div class="table-cell">Computer Science</div>
</div>
<div class="table-row">
<div class="table-cell">Jane Smith</div>
<div class="table-cell">21</div>
<div class="table-cell">Mathematics</div>
</div>
</div>
</body>
</html>
The output displays a structured table with proper borders and spacing
Student Information ???????????????????????????????????????? ? Name ? Age ? Course ? ???????????????????????????????????????? ? John Doe ? 22 ? Computer Science ? ? Jane Smith ? 21 ? Mathematics ? ????????????????????????????????????????
Method 2: Using CSS Flexbox
Flexbox provides a more flexible approach for creating responsive table-like layouts. This method automatically adjusts column widths based on content and screen size.
Example
Following example demonstrates a flexible table structure using CSS flexbox
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Table Method</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
.flex-table {
display: flex;
flex-direction: column;
border: 2px solid #333;
border-radius: 8px;
overflow: hidden;
background-color: white;
}
.flex-row {
display: flex;
}
.flex-cell {
flex: 1;
padding: 15px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.flex-cell:last-child {
border-right: none;
}
.flex-header {
background-color: #2196F3;
color: white;
font-weight: bold;
}
.flex-row:last-child .flex-cell {
border-bottom: none;
}
</style>
</head>
<body>
<h2>Product Catalog</h2>
<div class="flex-table">
<div class="flex-row flex-header">
<div class="flex-cell">Product</div>
<div class="flex-cell">Price</div>
<div class="flex-cell">Stock</div>
</div>
<div class="flex-row">
<div class="flex-cell">Laptop</div>
<div class="flex-cell">$999</div>
<div class="flex-cell">15</div>
</div>
<div class="flex-row">
<div class="flex-cell">Smartphone</div>
<div class="flex-cell">$699</div>
<div class="flex-cell">28</div>
</div>
<div class="flex-row">
<div class="flex-cell">Tablet</div>
<div class="flex-cell">$399</div>
<div class="flex-cell">12</div>
</div>
</div>
</body>
</html>
The flexbox approach creates a responsive table that adapts to different screen sizes while maintaining equal column widths
Product Catalog ????????????????????????????????????? ? Product ? Price ? Stock ? ????????????????????????????????????? ? Laptop ? $999 ? 15 ? ? Smartphone ? $699 ? 28 ? ? Tablet ? $399 ? 12 ? ?????????????????????????????????????
Method 3: Using CSS Grid
CSS Grid offers the most control over table layouts, allowing you to define exact column and row structures with precise sizing and positioning.
Example
Following example shows a grid-based table with defined column widths
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Table Method</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.grid-table {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border: 2px solid #FF5722;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
}
.grid-cell {
padding: 15px;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.grid-cell:nth-child(3n) {
border-right: none;
}
.grid-header {
background-color: #FF5722;
color: white;
font-weight: bold;
}
.grid-table > .grid-cell:nth-last-child(-n+3) {
border-bottom: none;
}
</style>
</head>
<body>
<h2>Employee Records</h2>
<div class="grid-table">
<div class="grid-cell grid-header">Employee Name</div>
<div class="grid-cell grid-header">Department</div>
<div class="grid-cell grid-header">Salary</div>
<div class="grid-cell">Alice Johnson</div>
<div class="grid-cell">Engineering</div>
<div class="grid-cell">$75,000</div>
<div class="grid-cell">Bob Wilson</div>
<div class="grid-cell">Marketing</div>
<div class="grid-cell">$65,000</div>
<div class="grid-cell">Carol Brown</div>
<div class="grid-cell">HR</div>
<div class="grid-cell">$58,000</div>
</div>
</body>
</html>
The CSS Grid approach provides precise control over column proportions, where the first column takes twice the space of the others
Employee Records ????????????????????????????????????????????????? ? Employee Name ? Department ? Salary ? ????????????????????????????????????????????????? ? Alice Johnson ? Engineering ? $75,000 ? ? Bob Wilson ? Marketing ? $65,000 ? ? Carol Brown ? HR ? $58,000 ? ?????????????????????????????????????????????????
Comparison of Methods
Following table compares the three approaches for creating tables without the <table> tag
| Method | Best For | Browser Support | Complexity |
|---|---|---|---|
| CSS Display Table | Traditional table-like behavior | Excellent (IE8+) | Low |
| CSS Flexbox | Responsive layouts, equal spacing | Good (IE10+) | Medium |
| CSS Grid | Complex layouts, precise control | Modern browsers (IE11+ with prefixes) | High |
Advantages of Div-Based Tables
Better Responsive Design Easier to make mobile-friendly layouts
Flexible Styling More CSS styling options compared to traditional tables
Semantic Freedom Can represent non-tabular data that looks like a table
Modern Layout Techniques Leverages Flexbox and Grid for advanced layouts
Conclusion
Creating tables without the <table> tag offers greater flexibility for responsive design and modern layouts. CSS display table properties work best for simple tabular data, while Flexbox and Grid provide superior responsive control. Choose the method based on your design requirements and browser support needs.
2K+ Views
