W3 Mind Logo
Home » How to create HTML tables Using DIV and CSS

How to create HTML tables Using DIV and CSS

How to create HTML tables with DIV and CSS

If you are building a responsive website, then you would know how difficult it is to manage HTML tables.

So today we are going to tell you how you can create a table using DIV and CSS.
For this you will also have to use CSS, so that you can style the table properly.

Scroll down and find the required HTML and CSS code.

CSS Code:

				
					.w3Table { display: table; }
.w3TableRow { display: table-row; }
.w3TableHeading { display: table-header-group; }
.w3TableBody { display: table-row-group; }
.w3TableFoot { display: table-footer-group; }
.w3TableCell, .w3TableHead { display: table-cell; }
				
			

HTML Code:

				
					<div class="w3Table">
				<div class="w3TableHeading">
					<div class="w3TableHead">
						Task Name
					</div>
					<div class="w3TableHead">
						Cost
					</div>
					<div class="w3TableHead">
						Status
					</div>
				</div>
				<div class="w3TableBody">
					<div class="w3TableRow">
						<div class="w3TableCell">
							Designing
						</div>
						<div class="w3TableCell">
							$10.00
						</div>
						<div class="w3TableCell">
							Done
						</div>
					</div>
					<div class="w3TableRow">
						<div class="w3TableCell">
							Development
						</div>
						<div class="w3TableCell">
							$20.00
						</div>
						<div class="w3TableCell">
							Done
						</div>
					</div>
					<div class="w3TableRow">
						<div class="w3TableCell">
							SEO
						</div>
						<div class="w3TableCell">
							$30.00
						</div>
						<div class="w3TableCell">
							Done
						</div>
					</div>
				</div>
				<div class="w3TableFoot">
					<div class="w3TableHead">
						Sum
					</div>
					<div class="w3TableHead">
						$60.00
					</div>
					<div class="w3TableHead">
						All Done
					</div>
				</div>
			</div>
				
			
Example:
Task Name
Cost
Status
Designing
$10.00
Done
Development
$20.00
Done
SEO
$30.00
Done
Sum
$60.00
All Done
About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!