Home
Blogger
Tips & Tricks

Blogger/Website Table HTML Code

Blogger/Website Table HTML Code

Blogger-Website-Table-HTML-Code

How to Add Table HTML Code in Blogger/Website

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>

Semi Automatic Table of Content

Table of Contents

The easiest option to display Table of Content. This feature will display all heading tags in your post (three levels h2 - h4), so make sure you write heading tags in order. Read: Common Error

Code to specify semi-automatic ToC widget location:

Copy Post HTML Code:

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Syntax Highlighter

Used to define lines of computer code (HTML, CSS, Javascript, etc.) in posts.

Demo

Copy Post HTML Code:

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'><div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>

</div></pre>
</div>

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.

MultiTabs Syntax Highlighter

#Blogger #Tips & Tricks

Post a Comment

Download

https://www.cpmrevenuegate.com/ik2dk2f9?key=40099393957667af4109d955677a590d

 

Download

Download

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.