Welcome to ThemesGadget. In this post, we will learn how to make a responsive HTML table layout in Blogger, HTML table with CSS, HTML table example, HTML table format, follow our steps carefully to avoid any error. But first, Let's talk about it a little.
What Is A HTML Table Layout?
A Table is a particular arrangement of text, numbers, and other items displayed on a screen or page. The table is used to display different data types in rows and columns. This data can be anything from statistical information to tabular text.
This post gives you step-by-step instructions on adjusting the HTML table format and width of each row so that every column fits exactly into its own space without overlapping one another and makes sure it doesn't take up too much of your visitors' screen!
It's a perfect tutorial for those of you who want some actual practical tips and tricks for using HTML table layout in blogs, like me! You don't need any programming knowledge or experience! All you need is to follow our instructions carefully, and this handy little tutorial will help you get started.
The Purpose Of HTML Table Layout
The purpose of tables is to make your content easier to learn and read. It's also an important design for structuring information.
But there are some common problems with tables that can cause confusion for users and make the content harder to navigate. But we will not discuss problems today.
Importance Of HTML Tables
Blogger does not have a feature to make a responsive HTML table layout for your blog. It means that the reader's display screen will determine the layout of your blog.
For Example - HTML Table Layout
If you create a blog viewable on a mobile device (e.g., iPhone), your layout will differ from creating it for a desktop computer (e.g., notebook).
This is because the two devices have drastically different resolutions and pixel densities. If you want your blogger website to be viewable on many different devices,
You need to ensure that the relationship between the information in your text and its location on the screen is correct relative to each device's resolution and pixel density.
Responsive HTML Table Layout Are A Great Way To Organize Information
Bloggers and web designers are experts in the art of designing tables. This is because tables are the most popular means of displaying information.
An HTML table layout is useful for displaying content, especially when that content is very large or complex.
A table is a great way to present data in a readable format for design. Therefore, using tables has been a staple of design since before computer screens and mouse clicks. For the HTML table example, use this button below to look at how it looks.
How To Make A Responsive HTML Table Layout In Blogger
The article can find all the information you need to make a responsive HTML table layout. We'll learn how to make a responsive table in Blogger. It's quite simple and easy to use. This tutorial is for all blogger users with little or no experience with Blogger.
To make an HTML table layout for your blogger site, you need to add HTML and CSS codes for it. These codes have to be added in 2 steps. We will add HTML code in the 1st step and CSS in the last step.
Step 1 - Adding HTML (HTML Table Making)
There are three styles of table listed below with different colors, to identify easily, Style 1 with "Red Color", Style 2 with "Blue Color", Style 3 with "Green Color". You can pick anyone style you like the most and leave others.
<div class="wrapper">
<div id="Style-1" class="table"> <!-- STYLE ONE -->
<div class="row header">
<div class="cell">Name</div>
<div class="cell">Age</div>
<div class="cell">Occupation</div>
<div class="cell">Location</div>
</div>
<div class="row">
<div class="cell" data-title="Name">Luke Peters</div>
<div class="cell" data-title="Age">25</div>
<div class="cell" data-title="Occupation">Freelance Web Developer</div>
<div class="cell" data-title="Location">Brookline, MA</div>
</div>
<div class="row">
<div class="cell" data-title="Name">Joseph Smith</div>
<div class="cell" data-title="Age">27</div>
<div class="cell" data-title="Occupation">Project Manager</div>
<div class="cell" data-title="Location">Somerville, MA</div>
</div>
<div class="row">
<div class="cell" data-title="Name">Maxwell Johnson</div>
<div class="cell" data-title="Age">26</div>
<div class="cell" data-title="Occupation">UX Architect & Designer</div>
<div class="cell" data-title="Location">Arlington, MA</div>
</div>
<div class="row">
<div class="cell" data-title="Name">Harry Harrison</div>
<div class="cell" data-title="Age">25</div>
<div class="cell" data-title="Occupation">Front-End Developer</div>
<div class="cell" data-title="Location">Boston, MA</div>
</div>
</div>
<div id="Style-2" class="table"> <!-- STYLE TWO -->
<div class="row header green">
<div class="cell">Product</div>
<div class="cell">Unit Price</div>
<div class="cell">Quantity</div>
<div class="cell">Date Sold</div>
<div class="cell">Status</div>
</div>
<div class="row">
<div class="cell" data-title="Product">Solid oak work table</div>
<div class="cell" data-title="Unit Price">$800</div>
<div class="cell" data-title="Quantity">10</div>
<div class="cell" data-title="Date Sold">03/15/2021</div>
<div class="cell" data-title="Status">Waiting for Pickup</div>
</div>
<div class="row">
<div class="cell" data-title="Product">Leather iPhone wallet</div>
<div class="cell" data-title="Unit Price">$45</div>
<div class="cell" data-title="Quantity">120</div>
<div class="cell" data-title="Date Sold">02/28/2021</div>
<div class="cell" data-title="Status">In Transit</div>
</div>
<div class="row">
<div class="cell" data-title="Product">27" Apple Thunderbolt displays</div>
<div class="cell" data-title="Unit Price">$1000</div>
<div class="cell" data-title="Quantity">25</div>
<div class="cell" data-title="Date Sold">02/10/2021</div>
<div class="cell" data-title="Status">Delivered</div>
</div>
<div class="row">
<div class="cell" data-title="Product">Bose studio headphones</div>
<div class="cell" data-title="Unit Price">$60</div>
<div class="cell" data-title="Quantity">90</div>
<div class="cell" data-title="Date Sold">01/14/2021</div>
<div class="cell" data-title="Status">Delivered</div>
</div>
</div>
<div id="Style-3" class="table"> <!-- STYLE THREE -->
<div class="row header blue">
<div class="cell">Username</div>
<div class="cell">Email</div>
<div class="cell">Password</div>
<div class="cell">Active</div>
</div>
<div class="row">
<div class="cell" data-title="Username">ninjalug</div>
<div class="cell" data-title="Email">misterninja@hotmail.com</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">Yes</div>
</div>
<div class="row">
<div class="cell" data-title="Username">jsmith41</div>
<div class="cell" data-title="Email">joseph.smith@gmail.com</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">No</div>
</div>
<div class="row">
<div class="cell" data-title="Username">1337hax0r15</div>
<div class="cell" data-title="Email">misterdude1000@aol.com</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">Yes</div>
</div>
<div class="row">
<div class="cell" data-title="Username">hairyharry19</div>
<div class="cell" data-title="Email">harryharry@gmail.com</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">Yes</div>
</div>
</div>
</div>
Step 2 - Adding CSS (HTML Table With CSS)
These CSS Codes are in a Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.
If you use the Imagz + Landing Page blogger template, add this highlighted CSS; Otherwise, leave it.
<style>
.onPst .blogPts{max-width:1040px;}
.ps .table { display: table;}
@media screen and (max-width:580px){body{font-size:16px;line-height:22px;}}.wrapper{font-size:14px;margin:0 auto;padding:40px;max-width:1000px;}.table{margin:0 0 40px 0;width:100%;box-shadow:0 1px 3px rgba(0,0,0,0.2);display:table;padding:0 0!important;}@media screen and (max-width:580px){.table{display:block;}}.row{display:table-row;background:#f6f6f6;}.row:nth-of-type(odd){background:#e9e9e9;}.row.header{font-weight:900;color:#ffffff;background:#867CB4;}.row.green{background:#5BACB2;}.row.blue{background:#5D8FAE;}@media screen and (max-width:580px){.row{padding:14px 0 7px;display:block;}.row.header{padding:0;height:6px;}.row.header .cell{display:none;}.row .cell{margin-bottom:10px;}.row .cell:before{margin-bottom:3px;content:attr(data-title);min-width:98px;font-size:10px;line-height:10px;font-weight:bold;text-transform:uppercase;color:#969696;display:block;}}.cell{padding:6px 12px;display:table-cell;}@media screen and (max-width:580px){.cell{padding:2px 16px;display:block;}}
</style>
Conclusion
I have a long-time interest in HTML because I have always loved how easy it is to create tables. I use the CSS Table feature of WordPress to create them, but there are many other ways you could do it.
In this article, I have shown you how to make a responsive HTML table layout in Blogger with the help of CSS.
We hope that this article helped you make a responsive HTML table layout on your blogger website. Do let us know if you have any other questions regarding the HTML table. You can get in touch with us via our comment form or telegram.