Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How create table without using <table> 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 portray it, the 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 representation. Particularly when it comes to statistical information. Tables are typically constructed in web design using the <table> and </table> tags. Making a table is a bit difficult task, particularly when the responsiveness is the concern.
Let's dive into the article to learn more about creating a table without using <table> tag. This can be achieved by using the HTML <div> tag and some CSS styling and there is no need for the installation of any plugin or additional framework. Let's look one by one.
HTML <div> tag
The division tag is also known as the <div> tag. In HTML, the <div> 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 the most usable tag in web development because it allows us to divide out data 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> ……… </div>
Let's jump into the examples to get more understanding on creating a table without using the <table> tag.
Example
Following is the example where we are going to create a table by using the HTML <div> tag and applying the CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.table {
display: table;
width: auto;
border: 3px solid #ABEBC6;
}
.table-row {
display: table-row;
width: auto;
}
.table-col {
float: left;
display: table-column;
width: 150px;
border: 2px solid #BB8FCE;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-col">Animal</div>
<div class="table-col">Food</div>
</div>
<div class="table-row">
<div class="table-col">Lion</div>
<div class="table-col">Meat</div>
</div>
</div>
</body>
</html>
When the above code gets executed, it will generate an output consisting of the table created containing data with applied CSS displayed on the webpage.
Example
In the following example, we are going to use the flexbox container to make the grid flexible to adjust to the amount of content in it.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D6EAF8;
}
#container {
width: 400px;
}
.box {
display: flex;
}
.box-cell {
flex: 1 1 auto;
border: 2px solid #BB8FCE;
}
</style>
</head>
<body>
<div id='container'>
<div class="box">
<div class="box-cell">Mahendra Singh Dhoni, commonly known as MS Dhoni, is a former Indian cricketer and captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014, who plays as a Wicket-keeper-Batsman.</div>
<div class="box-cell">Piece of information.</div>
<div class="box-cell">Animal</div>
</div>
<div class="box">
<div class="box-cell">FISH</div>
<div class="box-cell">CAT</div>
<div class="box-cell">MONKEY</div>
</div>
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the table applied with CSS, which is flexible and makes the data inside the table adjust according to its amount of content.
Example
Considering another scenario where we are going to create a table without using the <table> tag.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
height: 25px;
}
.tutorial1 {
flex: 1 1 auto;
background: #DFFF00;
}
.tutorial2 {
width: 150px;
background: #DE3163;
}
.tutorial3 {
width: 120px;
background: #40E0D0;
}
</style>
</head>
<body>
<div class="container">
<div class="tutorial1"></div>
<div class="tutorial2"></div>
<div class="tutorial3"></div>
</div>
</body>
</html>
When we execute the above program, the output window will pop up, displaying the CSS table on the webpage.
585 Views
