Skip to main content

5 HTML Tables For Blogger (Add table to a post without coding knowledge)

HTML Tables Blogger&Wordpress
Adding a table in a Blogger post isn't hard, though this feature isn't added yet to a Blogger editor panel. You can add a table in your post by using HTML codes given below. Whether you use Blogger or WordPress, you can add a table in your articles without coding knowledge. Only you need to do is to copy a code of your favorite table below and paste it to your post. If you're good at coding, you can customize it by adding or reducing its columns and rows. Customizing these codes doesn't need high knowledge of coding.

How to add HTML table to a Blogger post

To add a table in your blogger post follow below simple steps:
  1. Copy HTML code of your favourite table below.
  2. Sign in to your Blogger account and create a post.
  3. Switch to "HTML view" and paste a code at a place where you want a table to appear.
  4.  Switch back to "Compose view".
  5. Preview and publish your post.

Table 1

Code

<div class="table">
  <table style="white-space: nowrap;">
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Abhishek</td>
        <td>Padhi</td>
        <td>90</td>
        <td>96</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>2</td>
        <td>Udit</td>
        <td>Narayan</td>
        <td>95</td>
        <td>98</td>
        <td>99</td>
      </tr>
      
      <tr>
        <td>3</td>
        <td>Rohit</td>
        <td>Thakur</td>
        <td>90</td>
        <td>93</td>
        <td>89</td>
      </tr>
      
    </tbody>
  </table>
</div>


<style> 
.table {
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;
} 
  
 .table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    color: white;
    background: darkcyan;
}
  
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
  
 table th {
    padding: 16px;
    text-align: inherit;
    border-bottom: 1px solid black;
   color:white!important;
}
  
  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
  
 table:not(.tr-caption-container) {
    min-width: 100%;
    border-radius: 3px;
}
</style>

Preview of table 1

No Column_1 Column_2 Column_3 Column_4 Column_5
1 Abhishek Padhi 90 96 99
2 Udit Narayan 95 98 99
3 Rohit Thakur 90 93 89


Table 2

Code

 <div class="table-container">
      <h2 class="table-heading">Sample HTML Table 2</h2>

      <table style="white-space: nowrap;">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Percentage</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td data-heading="First Name">Abhishek</td>
            <td data-heading="Last Name">padhi</td>
            <td data-heading="Percentage">90</td>
          </tr>

          <tr>
            <td data-heading="First Name">Happy</td>
            <td data-heading="Last Name">singh</td>
            <td data-heading="Percentage">85</td>
          </tr>

          <tr>
            <td data-heading="First Name">Virat</td>
            <td data-heading="Last Name">kohli</td>
            <td data-heading="Percentage">80</td>
          </tr>
        </tbody>
      </table>
    </div>
    
<style>    
    .table-container {
  font-family: system-ui;
}
  
 .table-container table {
    width: 100%;
    background: #fff;
    color: #222;
    box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
    border-collapse: collapse;
}

.table-container h2.table-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.table-container table {
  width: 100%;
  background: #fff;
  color: #222;
  padding: 24px;
  box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
  border-collapse: collapse;
}

.table-container table thead tr {
  background: #222;
  color: #fff;
}

.table-container table td,
.table-container table th {
  padding: 16px 32px;
  text-align: center;
}

.table-container table tr {
  border-bottom: 1px solid #eee;
}
  
  table thead th {
    color: white!important;
  }
</style>

Preview of table 2

Sample HTML Table 2

First Name Last Name Percentage
Abhishek padhi 90
Happy singh 85
Virat kohli 80

Table 3

Code

<table border=”1" style=”width:100%;”>
<tr>
<th>Column 1 Header</th>
<th>Column 2 Header</th>
<th>Column 3 Header</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>

 

Preview of Table 3

Column 1 Header Column 2 Header Column 3 Header
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

Table 4

Code

<style>
#simple_table {
font-family: arial, sans-serif;
border-collapse: collapse; 
width: 100%;
background-color: #ffffff;
color:black;
}
#simple_table td, #simple_table th {
text-align: left;
padding: 8px;
border: 1px solid #808080;
}
#simple_table tr:nth-child(even) {
background-color: #dddddd;
}
#simple_table tr:hover {
background-color: #ffff99;
}
#simple_table tr > th 
{
background: #1b90bb;
color: #ffffff;
}
</style>
 <table id='simple_table' >
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</tr>

<tr>
<td>row1 col 1</td>
<td>row1 col 2</td>
<td>row1 col 3</td>
</tr>
<tr>
<td>row2 col 1</td>
<td>row2 col 2</td>
<td>row2 col 3</td>
</tr>
<tr>
<td>row3 col 1</td>
<td>row3 col 2</td>
<td>row3 col 3</td>
</tr>
</table>

Preview of Table 4

head 1 head 2 head 3
row1 col 1 row1 col 2 row1 col 3
row2 col 1 row2 col 2 row2 col 3
row3 col 1 row3 col 2 row3 col 3

Table 5

Code

<table border="2" cellpadding="0" cellspacing="0" style="width: 100%;"> <tbody><tr> <td> <table border="2" cellpadding="1" cellspacing="0" style="width: 100%;"> <tbody> <tr> <th> <div style="background-color: black; text-align: center;"> <span style="color: white;">Write the Title or Heading of your Table</span> </div> </th> </tr></tbody></table> </td> </tr>   <tr> <td> <div style="height: 50px; overflow: auto; width: 100%;"> <table border="1" cellpadding="1" cellspacing="0" style="width: 100%;"> <tbody>   <tr> <td><a href="URL link of any file or webpage" rel="nofollow">File Name (Cell A1)</a></td> <td><a href="URL link of any file or documents" rel="nofollow">File Name (Cell B1)</a></td> </tr>   <tr> <td>Text without link (Cell A2)</td> <td>Text without link (Cell B2)</td> </tr>   </tbody> </table> </div> </td> </tr> </tbody> </table>

 

Preview of Table 5

Write the Title or Heading of your Table
File Name (Cell A1) File Name (Cell B1)
Text without link (Cell A2) Text without link (Cell B2)

YOU CAN ALSO READ:

Labels:

Comments

Post a Comment