HTML DIV TAG Table Same Like TABLE TAG Example

To show a data in a grid on your Web Page, HTML TABLE tag is enough to do as per your requirement but when it comes to coming advancement and alteration with your table, TABLE tag didn’t allow you to do so that’s why you have to think an alternate way to view your data in grid view on your web page easily.

For this purpose, CSS introduces very time ago some new styles that will help you out to play with the DIV tag to convert it into the same as the TABLE tag and will work the same as the HTML TABLE tag display. In extra you can add your desired extra codes in between them.

One of the common problem to skip the TABLE tag and to use the DIV tag is that you cant add extra tags in between the HTML TABLE tag and its component like TR, TH, TD, TBODY, THEAD, etc like if you want to add some form tag to make a customizable form in every row of the table and allow the user to fill and submit then TABLE tag will not let FORM tag inside their body that will push you to use the DIV tag as TABLE view. You are a developer, you have encountered many problems so here is the simplest solution for all of the problems.

There are many code snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. It Will Work On All Major Browsers.
2. Pure HTML CSS Code.
3. No External CSS, JavaScript, JQuery Or Script.
4. Small CSS Code With Easy Understanding.
5. Fully Responsive With Some Alteration

HTML DIV TAG Table Same Like TABLE TAG Live Code Sample Example:

CSS:

#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;
}

#resp-table-footer {
	display: table-footer-group;
	background-color: gray;
	font-weight: bold;
	font-size: 25px;
	color: rgba(255, 255, 255, 0.45);
}

.table-footer-cell {
	display: table-cell;
	padding: 10px;
	text-align: justify;
	border-bottom: 1px solid black;
}

HTML:

<div id=“resp-table”>
	<div id="resp-table-caption">
		Responsive Table without Table tag
	</div>
	<div id="resp-table-header">
		<div class="table-header-cell">
			Header 1
		</div>
		<div class="table-header-cell">
			Header 2
		</div>
		<div class="table-header-cell">
			Header 3
		</div>
		<div class="table-header-cell">
			Header 4
		</div>
		<div class="table-header-cell">
			Header 5
		</div>
	</div>
	<div id="resp-table-body">
		<div class="resp-table-row">
			<div class="table-body-cell">
				Cell 1–1
			</div>
			<div class="table-body-cell">
				Cell 1–2
			</div>
			<div class="table-body-cell">
				Cell 1–3
			</div>
			<div class="table-body-cell">
				Cell 1–4
			</div>
			<div class="table-body-cell">
				Cell 1–5
			</div>
		</div>
	</div>
	<div id="resp-table-footer">
		<div class="table-footer-cell">
			Footer 1
		</div>
		<div class="table-footer-cell">
			Footer 2
		</div>
		<div class="table-footer-cell">
			Footer 3
		</div>
		<div class="table-footer-cell">
			Footer 4
		</div>
		<div class="table-footer-cell">
			Footer 5
		</div>
	</div>
</div>

Final Words:

Be aware that the is placed well in your document. Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.