How to Add Table to my Blog

How to Add Table to my Blog

Adding a table to the blog was really a headache for a While. With simple code, we can change that. You simply need to know a little bit of code. 

Here is the HTML code that you can use. There is no limit on tables or lines that you want. But check for the font size and Mobile compatibility. 

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<h2>Your Table Name</h2>

<table>
<tr>
<th>Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
</tr>
<tr>
<td>1</td>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2</td>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>3.1</td>
<td>3.2</td>
</tr>
<tr>
<td>4</td>
<td>4.1</td>
<td>4.2</td>
</tr>
<tr>
<td>5</td>
<td>5.1</td>
<td>5.2</td>
</tr>
<tr>
<td>6</td>
<td>6.1</td>
<td>6.2</td>
</tr>
</table>

</body>
</html>

If you paste it in the Html version you would get the following table

Your Table Name

Heading1 Heading2 Heading3
1 1.1 1.2
2 2.1 2.2
3 3.1 3.2
4 4.1 4.2
5 5.1 5.2
6 6.1 6.2

You need to need to change fields and names. And you’re done. 

Now go to your blog post and click on the HTML version and paste in the exact place where you want it. and then check for preview and publish it. 

You can change “color” ” font: Name, Size” and table color as well. 

Ref: If you have any question check out  W3School  for the detail info

If you enjoyed this post, please consider leaving a comment and subscribing to the email newsletter to have future articles delivered to your email.

Leave a Comment

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