How to Create Tables Using HTML on Blogger

Creating tables in your posts helps you present information in a clear, easy-to-understand, and professional way. Tables are a great way to display data, compare information, or organize content in columns and rows. On Blogger, you can easily create tables using HTML without using complicated design tools. This article will show you how to create a basic table using HTML on Blogger and how to customize the table to match the look and feel of your blog.

Basic Structure of HTML Table

Before we begin, let’s learn the basic structure of a table in HTML. An HTML table consists of the following basic tags:

• <table>: The main tag surrounds the entire table.
• <tr>: Row tag, each row of the table will be surrounded by this tag.
• <th>: Column header tag, usually used in the first row to display the titles of the columns.
• <td>: Cell tags, which contain data in rows.

Example of Creating a Basic Table Using HTML

Here’s an example of how to create a basic table that displays product information with name, price, and quantity:

<table border="1" cellpadding="5" cellspacing="0" style="width: 100%; border-collapse: collapse;">
    <tr>
        <th>Tên Sản Phẩm</th>
        <th>Giá</th>
        <th>Số Lượng</th>
    </tr>
    <tr>
        <td>Áo Thun</td>
        <td>100,000 VND</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Quần Jeans</td>
        <td>200,000 VND</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Giày Thể Thao</td>
        <td>300,000 VND</td>
        <td>20</td>
    </tr>
</table>
            

When you add this HTML code to your Blogger post, you will have a clean and easy to read table. Attributes like border, cellpadding, cellspacingand style helps you customize the table as you like.

Insert Table Into Blogger Post

To insert a table into a Blogger post, you can follow these steps:

1. Go to Blogger and open the post where you want to insert the table or create a new post.
2. Switch to “HTML” mode by clicking the “HTML” button in the upper left corner of the editor.
3. Insert the table HTML code at the desired location in the article.
4. Switch back to “Edit” mode to see if the table displays correctly and continue editing if needed.
5. Click “Save” or “Publish” to finish.

Customize Table With CSS

You can customize your table to look nice and match the look of your blog using CSS. Here’s an example of how to customize a table with CSS to add color and alignment:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 18px;
        text-align: left;
    }
    th, td {
        padding: 12px;
        border: 1px solid #ddd;
    }
    th {
        background-color: #f4f4f4;
        color: #333;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>
            

Adding the above CSS code to the head of your post or in the style tag in Blogger will give your table a more professional look. You can customize the colors, spacing, and style as you like to match your blog’s style.

Tips to Optimize Tables for Blogs

Here are some tips for optimizing tables on your blog:

• Use flexible sizes: Set properties width="100%" so that the table can automatically adjust to the screen size, helping to display well on all devices.
• Avoid too many columns: Tables with too many columns can be difficult to read, especially on mobile devices. Keep tables simple and use only the necessary columns.
• Make sure the table is easy to read: Use colors and lines to differentiate rows and columns, making it easy for readers to grasp information.

Blogger Tricks

Creating tables with HTML on Blogger not only helps to present data clearly and intuitively but also makes your content more professional. By using basic HTML tags and customizing with CSS, you can create beautiful tables that match the blog interface. Hopefully with the above instructions, you will have more skills to make your blog more attractive and attract readers. Wish you success in developing your blog on Blogger!