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
Follow with me