How to add beautiful table in Blog?
Every blogger should know how to add tables in their post.Table is a arrangement of rows and columns which orderly present our data in good way.Lets see how to insert a beautiful table.
- Adding Tables is very easy. It can be done in just 2 steps. Follow below steps and add table in blogger post.
STEP 1: Go to your post where you want to add table.Go to HTML view.Copy the below code.
1: <table>
2: <tbody>
3: <tr>
4: <th>TERMS</th>
5: <th>BANKING ABBREVIATIONS</th>
6: </tr>
7: <tr>
8: <td>RTGS</td>
9: <td>Real Time Gross Settlement</td>
10: </tr>
11: <tr>
12: <td>DNS</td><td>Deferred Net Settlement</td>
13: </tr>
14: <tr>
15: <td>VAP</td><td>Value Added Principal</td>
16: </tr>
17: <tr>
18: <td>IPO</td><td>Initial Public Offering</td>
19: </tr>
20: </tbody>
21: </table>
- Click Save.
STEP 2: Go to THEME —> Customize —> Advanced —> Add CSS
Copy the below code and paste
1: table {
2: color:#333;
3: font-family:Helvetica,Arial,sans-serif;
4: width:100%;
5: border-spacing:1px;
6: border-collapse:separate;
7: padding:0 3px;
8: }
9: td, th {
10: height:30px;
11: transition:all .3s;
12: text-align:center;
13: width:auto;
14: }
15: th {
16: background:#B1B6AF;
17: font-weight:700;
18: border-radius: 5px;
19: }
20: td {
21: background:#FAFAFA;
22: }
23: tr:nth-child(even) td {
24: background:#F1F1F1;
25: }
26: tr:nth-child(odd) td {
27: background:#E1DDDD;
28: }
29: tr td:hover {
30: background:#666;
31: color:#FFF
32: }
- Click Save.
I have created a table using this code for my post. Click this link to visit post
Nice one 😝
Informative!
Very useful 👍