How to add a Table like WordPress in Blogger Post with HTML Code?

You've come to the right site if you want to learn how to add a stylish and colorful table to your blogger blog post and make it look like a table like WordPress. To utilize this method, you must have a very basic understanding of HTML, as this will make it easier for you to construct the code for a table.

You can easily create a table using HTML and add it to your blog post with a lovely color-stripes style CSS code by copying and pasting the code into your blogger theme. I'll share some CSS code (Which you need to add to your theme once) and HTML with you in this post. It will be a responsive table, which means that when you open your post on a mobile device, the table data will automatically adjust to fit the screen of the device, and if the text data overflows from the table area, the table will automatically become scrollable to improve user experience.

To make a table with stylish and colorful stripes, use the complete CSS and HTML code provided here.

- Here is the CSS Code -

        .navi-tstripes tr:nth-child(odd) {
          background-color: #f0f0f0;
      }
    
      .navi-table {
          border-collapse: collapse;
          width: 100%;
          vertical-align: middle;
          border: 1px solid #eee;
          color: #000;
      
      }
    
      .navi-table td,
      .navi-table th {
          padding: 10px 15px;
          text-align: left;
          border-width: 0 1px 1px 0;
          word-break: normal;
          line-height: 24px;
      }
    
      .navi-text-center th,
      .navi-text-center td {
          text-align: center !important;
      }
    
      .navi-block-table {
          margin: 0 0 1em;
          overflow-x: auto;
      }
  

- Here is the HTML Code -

      <div class="navi-block-table">
          <table class="navi-table navi-tstripes">
              <tr>
                  <th>Heading 1 Col1</th>
                  <th>Heading 2 Col2</th>
              </tr>
              <tr>
                  <td>Row 1 Col1</td>
                  <td>Row 1 Col2</td>
              </tr>

              <tr>
                  <td>Row 2 Col1</td>
                  <td>Row 2 Col2</td>
              </tr>
              <tr>
                  <td>Row 3 Col1</td>
                  <td>Row 3 Col2</td>
              </tr>
              <tr>
                  <td>Row 4 Col1</td>
                  <td>Row 4 Col2</td>
              </tr>
              <tr>
                  <td>Row 5 Col1</td>
                  <td>Row 5 Col2</td>
              </tr>
          </table>
      </div>
      <br>
  

Output Result :

Heading 1 Col1	Heading 2 Col2
Row 1 Col1	Row 1 Col2
Row 2 Col1	Row 2 Col2
Row 3 Col1	Row 3 Col2
Row 4 Col1	Row 4 Col2
Row 5 Col1	Row 5 Col2

If you want to center align text in the table then simply add "navi-text-center" class in the table tag like this 

<div class="navi-block-table">
    <table class="navi-table navi-text-center navi-tstripes">
        ..............
        .............
        .......
    </table>
</div>
<br>