Tạo Table mỗi dòng 1 màu trong WordPress hoặc Blogger (Blogspot)

Chia sẻ với các bạn cách tạo Table mỗi dòng 1 màu trong WordPress hoặc Blogger mà mình tìm hiểu để tự sử dụng trong web của mình. Cái này lấy ý tưởng từ loại table màu mè trong Ms Word, các bạn tự chỉnh sửa css để phù hợp với mình nhé.

Demo:

Code:

<!-- Tạo Table mỗi dòng mỗi màu -->
<style>
    .trhead{
        background-color:indigo;
        color: white;
        padding: 10px; 
        text-align: center;
        font-weight: bold;
    }
    .tr1{
        background-color: tomato;
        color: white;
        padding: 10px; 
        text-align: center;
    }
    .tr2{
        background-color:aqua;
        color: black;
        padding: 10px; 
        text-align: center;
    }
    .tdhead{
        color:cyan; 
        text-align: center;
        font-weight: bold;
        }
    .td1{
        color: white; 
        text-align: center;
        font-weight: bold;
        }
    .td2{
        color: black; 
        text-align: center;
        font-weight: bold;
        }
</style>
<figure class="wp-block-table"><table><tbody>
    <tr class="trhead">
        <td class="tdhead">Cột 1</td>
        <td class="tdhead">Cột 2</td>
        <td class="tdhead">Cột 3</td>
        <td class="tdhead">...</td>
    </tr>
    <tr class="tr1">
         <td class="td1">Cột 1</td>
         <td class="td1">Cột 2</td>
         <td class="td1">Cột 3</td>
         <td class="td1">...</td>
     </tr>
     <tr class="tr2">
         <td class="td2">Cột 1</td>
         <td class="td2">Cột 2</td>
         <td class="td2">Cột 3</td>
         <td class="td2">...</td>
     </tr>
 </tbody></table></figure>

Please follow and like us: