Home
Blogger
Tips-and-Tricks

How to Create a Professional Table in Blogger/Website using HTML/CSS code

Blogger/Website Table HTML Code
Malik Shakeel

Blogger-Website-Table-HTML-Code

How to Add Table HTML Code in Blogger/Website

Creating a professional and responsive table in Blogger is not difficult if you use the correct HTML and CSS. Standard tables often break or overflow on mobile screens, but a properly designed responsive table fits perfectly on all devices.

A well-structured table improves readability, user experience, and overall website appearance.

Why Use a Professional Responsive Table?

Mobile-Friendly Design
Traditional tables do not adapt well to small screens.

A responsive table automatically adjusts to mobile, tablet, and desktop screens.
No horizontal scrolling issues for users.

Better User Experience (UX)
Clean and readable tables make information easier to understand.

Users can quickly scan data without zooming.
The layout remains clean and organized.

Professional Look
A styled table gives your blog a modern and trustworthy appearance.

Looks consistent with modern Blogger themes.
Improves credibility and visual quality.

SEO & Accessibility Benefits
Well-structured tables help search engines understand your content better.

Clear rows and columns improve content structure.
Users spend more time on the page, helping SEO.

Table

The table in this theme has been set responsive, for example, if the number of columns or the width of the table exceeds the width of the screen, so as not to damage the layout, the table will automatically have a scroll function.

Please open this article on your mobile device and highlight the table section below:

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700

Copy Post HTML Code:

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>
  • white-space:nowrap; specifies the text to be a single line, it will not wrap to the next line and will continue until <br> tag is encountered.
  • min-width:100%; defines the minimum width of table, you can change it to px units for example 500px. Change it to 0 if you want the table width to be determined automatically.

Table with border

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700

Copy Post HTML Code:

<div class="table">
<table style="white-space: nowrap; min-width: 100%;" border="1">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</div>

Manual Table of Content

Contents
  1. Table
  2. Semi Automatic Table of Content
  3. Syntax Highlighter
  4. Automatic Colored Syntax Highlighter
  5.  
Using manual Table of Content is more complicated than the automatic version, you have to add a different ID attribute in each heading tag and write it in content list. But you need Manual Table of Content then follow these step
  • 1st copy URL form Table of Contents right top side
  • 2nd change name red mark from HTML code

Copy Post HTML Code:

<details class="sp toc" open="">
<summary data-show="Show all" data-hide="Hide all">Contents</summary>
<div class="toC">
<ol>
<li><a href="https://www.shakeelfile.com/2022/08/Plus-Ui-Theme-Table-HTML-Code.html#Table">Table</a></li>
<li><a href="https://www.shakeelfile.com/2022/08/Plus-Ui-Theme-Table-HTML-Code.html#Semi%20Automatic%20Table%20of%20Content">Semi Automatic Table of Content</a></li>
<li><a href="https://www.shakeelfile.com/2022/08/Plus-Ui-Theme-Table-HTML-Code.html#Syntax%20Highlighter">Syntax Highlighter</a></li>
<li><a href="https://www.shakeelfile.com/2022/08/Plus-Ui-Theme-Table-HTML-Code.html#Automatic%20Colored%20Syntax%20Highlighter">Automatic Colored Syntax Highlighter</a></li>
<li style="list-style-type: none;">&nbsp;</li>
</ol></div></details>

Automatic Colored Syntax Highlighter

Following Syntax is automatically highlighted / colored using Highlight.js

Demo

Copy Post HTML Code:


<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Common Errors:

This feature automatically detect the language and highlight the colors. But in some cases, it may not automatically detect the code language, at that time you have to add a classname as per the language, i.e. if it is html, you have to add html or language-html along with hl.

An Example:

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Limitations of using Automatic Colored Syntax Highlighter:

  • You cannot add any tag in your Preformatted Codes. For example, you would add <i class='block'></i>, that is no more going to be blocked with blue color.

Professional Benefits of This Table

Responsive Design
Thanks to the .custom-table-container, if the table is wider than the screen, a horizontal scroll bar appears on mobile devices.

This prevents the blog layout from breaking.
The table remains fully usable on small screens.

Visual Hierarchy
The blue header and bold text make table titles and headings clearly visible.

Important information stands out instantly.
Users can understand the structure at a glance.

Improved Readability
Zebra striping (alternating white and grey rows) makes long tables easier to read.

Rows are visually separated.
Users can scan large lists without confusion.

Hover Effect
When users move their mouse over a table row, the background color changes slightly.

This adds a modern, premium feel.
Enhances user interaction and focus.

Best SEO Title for This Post
If you are writing a blog post on this topic, the following title works best:

How to Create a Responsive Professional Table in Blogger (No Plugin Needed)

Also Take a Look at These

👉 Please Support Us ❤️ Subscribe OUR YouTube Channel 👍

💡 Note:
We hope you found this article helpful! If so, please consider sharing it with your friends. If you have any questions or run into any issues, feel free to drop a message in the comment box or Contact Us directly. We're here to help! ✅

Post a Comment