How to Paste a Simple and Stylish Table to Blogger

Blogger is a popular blogging platform that allows you to create and publish blog posts online.

One of the many ways to enhance the visual appeal of your blog posts is by adding tables.

Tables can be used to organize and present data, such as comparison charts or lists of information, in an organized and easy-to-read format.

If you're unsure of how to paste CSS code into your Blogger site,

please refer to this article for guidance before proceeding.

In this tutorial, we will show you how to create a simple and stylish table in HTML and add it to a Blogger post.

Let's get started!

Example of a stylish simple table

First Name	Last Name	Age
John	Doe	25
Jane	Smith	30
Bob	Johnson	40

CSS code for a stylish simple table

Click "Edit HTML" under "Themes" in the Blogger sidebar.

]]></b:skin>

Paste the following code before "]]></b:skin>".

*If you copy and paste (Ctrl+V) the code you want to find with Ctrl+F, you can easily find it. For Mac, Ctrl becomes "Command".

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px auto;
  margin-top: 20px;
  font-size: 17px;
}

thead {
  background-color: #f5f5f5;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #eee;
}

If the CSS code doesn't work when inserted inside "]]></b:skin>", it may be worth trying to insert the code immediately after <style> instead.

*In this Blogger blog, the CSS code is inserted after the <style> tag.

HTML code for Affiliate Box

Note that if your Blogger template already contains CSS code for the table, use the HTML editor to search for the existing "table" keyword and overwrite the new table code.

HTML code for a stylish simple table

Let's paste this code into the HTML editing of Blogger's post editing screen.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Johnson</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

In this example, the table contains three columns: First Name, Last Name, and Age.

The table has a header row and three data rows.

The table: <table>
The header row: <thead>
The data rows: <tbody>

Each is surrounded by such elements.

The column headings are defined using the <th> element, and the actual data values are defined using the <td> element.

This HTML/CSS code this time was created by ChatGPT.

ChatGPT is a powerful language model developed by OpenAI that has the ability to generate a wide range of content.

If you're not satisfied with the current design of the table on your Blogger blog, feel free to try out the table designs that we've shown you today.

If you're looking to start a successful Blogger blog, you won't want to miss our complete guide!

From designing your blog with SEO in mind to using data analysis to create engaging content, we've got everything you need to succeed.

Check out our article now!

How to Paste a Simple and Stylish Table to Blogger

Example of a stylish simple table

CSS code for a stylish simple table

HTML code for Affiliate Box

HTML code for a stylish simple table

連絡フォーム