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

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:

Copy HTML code of your favourite table below.
Sign in to your Blogger account and create a post.
Switch to "HTML view" and paste a code at a place where you want a table to appear.
Switch back to "Compose view".
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:

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

How to add HTML table to a Blogger post