How to add Table in Blogger Post
Blogger

How to add Table in Blogger Post

Spread the love

How to add Table in Blogger Post? Many times we need to add Table in our blog posts. In WordPress, there are many plugins to do this but if you are using Blogger then there is no external plugin to do this. But don’t worry. Because in this post, I will show you How to add a Table in Blogger Post.

How to add Table in Blogger Post?

To add tables in your blog post, you need to add HTML and CSS codes. I will give you two types of Tables. Use the table you like.

Table Sample 1:

Note: The Table is Full Responsive.


Your text h1Your text h2Your text h3
Your text A1Your text A2Your text A3
Your text B1Your text B2Your text B3
Your text C1Your text C2Your text C3
Your text D1Your text D2Your text D3

Table Customization:

Step 1: Copy the codes given below.  

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

Step 2: Paste code Codes on –
            Theme > Customize > Advanced > add CSS > Paste the codes.

Step 3: Now go to that post where you want to add a Table, then goto HTML section and paste the below codes where you want to add a table.


<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<br />
<table>
<tbody>
<tr>
<th>Your text h1</th>
<th>Your text h2</th>
<th>Your text h3</th>
</tr>
<tr>
<td>Your text A1</td>
<td>Your text A2</td>
<td>Your text A3</td>
</tr>
<tr>
<td>Your text B1</td>
<td>Your text B2</td>
<td>Your text B3</td>
</tr>
<tr>
<td>Your text C1</td>
<td>Your text C2</td>
<td>Your text C3</td>
</tr>
<tr>
<td>Your text D1</td>
<td>Your text D2</td>
<td>Your text D3</td>
</tr>
</tbody></table>


Step 4: Now return to Compose and click preview. If everything is correct then replace the given text with yours. Now you are good to go.



Step 5: To delete a Row, remove the below codes from the above codes (Step 3).

<tr>
    <td>Your text D1</td>
    <td>Your text D2</td>
    <td>Your text D3</td>
  </tr>


 Step 6: To add a new Row, just add the below codes just above </tbody></table>
Now just edit the given text with yours.

<tr>
    <td>Your text D1</td>
    <td>Your text D2</td>
    <td>Your text D3</td>
  </tr>

Your Text

Table Sample 2:

Note: The Table is Not Responsive.

Your Text        Your Text         
Your TextYour Text
Your TextYour Text
Your TextYour Text
Your TextYour Text

Table Customization:

Step 1: Copy the codes given below.

<table style=”background: 0px 0px rgb(255, 255, 255); border-collapse: collapse; border-radius: 10px; border-spacing: 1px; border: none; color: white; font-family: Times, Arial, sans-serif; font-size: 18px; outline: 0px; padding: 0px 3px; vertical-align: baseline; width: 629.6px;”><tbody style=”background: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;”>
<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><b style=”background: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;”><span style=”background: 0px 0px; border: 0px; font-size: 16px; outline: 0px; padding: 0px; vertical-align: baseline;”>Your Text&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></b></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></td></tr>
<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td></tr>
<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td></tr>
<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td></tr>
<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;Times New Roman&quot;; font-size: small;”>Your Text</span></td></tr>
</tbody></table>



Step 2: Now go to that post where you want to add this table, then go to the HTML section and paste the codes where you want to add a table. Now return to Compose.


Step 3: To delete a row, just remove the codes given below from the above codes (Step 1).

<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;times new roman&quot;; font-size: small;”>Your Text</span></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;times new roman&quot;; font-size: small;”>Your Text</span></td></tr>


Step 4: To add a new Row, Just add the codes given below just before </tbody></table> in the main codes (given in Step 1).

<tr style=”background: 0px 0px; border: 0px; height: 0pt; outline: 0px; padding: 0px; vertical-align: baseline;”><td style=”background: 0px 0px rgb(220, 0, 108); border: 1pt dotted rgb(255, 255, 255); outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;times new roman&quot;; font-size: small;”>Your Text</span></td><td style=”background: 0px 0px; border: 1pt dotted hotpink; color: black; outline: 0px; padding: 5pt; vertical-align: top;”><span style=”font-family: &quot;times new roman&quot;; font-size: small;”>Your Text</span></td></tr>


Step 5: To change the color, Search for RGB(220, 0, 108) and replace it with your color code.

I hope it will help you and now you know How to add Table in Blogger Post. I highly recommend you to watch the above video. I have explained everything briefly in that video.

How to add Table in Blogger Post

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *