How to online Make Table in Blogger blog Post

Say Hello 👋 to all of my friends, dear friends! Welcome to the SeoByMasroor.com Blog. In today’s tutorial, I’ll guide you through the process of creating a table in a Blogger blog post, complete with step-by-step instructions and illustrative images.

Tables, as featured on websites and blogs, serve as an effective means to organize and present data. For instance, you might have a wealth of information about your website, and visitors, including details like first names, last names, and email addresses.

I’ll show you how to format this data neatly into a table for a more structured and visually appealing presentation.

Let’s get started!

Steps to create the table in Blogger

Creating a table in a Blogger blog post is a useful way to organize and present information neatly. You can follow these step-by-step instructions to create a table in your Blogger blog post:

• Log in to Blogger:
  • Go to Blogger and log in with your Google account credentials.
• Access the Blogger Dashboard:
  • After logging in, you’ll be taken to the Blogger dashboard, where you can manage your blogs.
• Create or Edit a Blog Post:
  • If you’re creating a new post, click the “Create a new post” button.
  • If you want to edit an existing post, click on the “Posts” section in the dashboard, find the post you want to edit, and click the “Edit” button.
• Switch to HTML Mode:
  • In the Blogger post editor, you have two modes: “Compose” and “HTML.” To create a table, switch to the “HTML” mode. You can find this option in the top left corner of the editor.
• Insert HTML Table Code:
  • Now, you’ll need to insert HTML code to create your table. HTML tables consist of <table>, <tr> (table row), <td> (table data), and other tags to structure the table.
  • Here’s a basic example of an HTML table code:

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

• You can customize this code to fit your specific table data. For instance, you can add more rows and columns or change the content within the <td> tags.

• Switch Back to Compose Mode:
  • After adding your table HTML code, switch back to the “Compose” mode in the editor to see a visual representation of your table.
• Adjust Table Settings (Optional):
  • Blogger’s visual editor allows you to adjust table settings, such as alignment, border, and cell padding. Highlight the table and use the formatting options in the toolbar to make adjustments.
• Preview and Publish:
  • Before publishing your post, it’s a good idea to preview it to ensure your table looks the way you want. Click the “Preview” button to see how your table appears in the post.
• Publish or Update:
  • If you’re satisfied with the table’s appearance, click the “Publish” button to publish a new post, or click “Update” to save changes to an existing post.
• View Your Blog Post:
  • After publishing or updating, visit your blog to see the table in action. It should display properly for your readers.

That’s it! You’ve successfully created a table in your Blogger blog post using HTML code. You can further refine the table’s appearance and formatting using HTML and CSS if needed.

How to Make Table in Blogger Blog Post with Pictures (Easier way)

Step 1: Let’s Start with your Blogger blog dashboard. Look for the “Theme” option, and then click on it. Next, click on the orange button that says “Customize” from the dropdown menu.

Step 2: On this page, you’ll notice four buttons on the left side of the webpage. Click on the last button labeled “Advanced.” After that, click on the other button labeled “Page Text.”

More Read

How do you write a heartfelt love letter?

How to write check in cents

How do you write an application to your principal for issuing transfer certificate?

Step 3: Here you can scroll up and go to the last option then choose the Add CSS option. Now paste the Table CSS code here and then click the Save button.

CSS table code:

table.table1 { color:#333; font-family:Helvetica,Arial,sans-serif; width:100%; border-spacing:1px; border-collapse:separate; padding:0 3px;} table.table1 td, table.table1 th { height:30px; transition:all .3s; text-align:center; width:auto;} table.table1 th { background:#B1B6AF; font-weight:700; border-radius: 5px;} table.table1 td { background:#FAFAFA;} table.table1 tr:nth-child(even) td { background:#F1F1F1;} table.table1 tr:nth-child(odd) td { background:#E1DDDD;} table.table1 tr td:hover { background:#666; color:#FFF}

Step 5: Now go to the Posts option and edit the post where you add table format.

Step 6: Here you click the pencil icon which shows the top left side of the webpage and select the HTML view option.

Step 7: Now copy the Table HTML code and paste where you want to add a table format and in the table HTML code, you can change the heading and data according to your content then click the Update orange button for saving the changes.

CSS Table code

<table class="table1">
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>

Step 8: Now open the Blogger blog to check the results.

If you’re planning to create a table in your blog post, it’s a good idea to first take a look at preview mode.

I hope 🤞 you enjoy this article: Thank you for reading! We appreciate your time and hope you found this post valuable. Stay tuned for more informative content in the future.