如何在HTML中創建多彩表格

Question

我有一個關於WordPress的博客，我想在我的博客上創建一個時尚多彩的表格。建議我輸入我的代碼blog

Answer 1

正如@Alex指出的那樣，材料調色板是獲取顏色的一種現代化的好方法。所有你需要做的就是將它應用到你的表的不同部分。

.myTable { 
 
    width: 500px; 
 
    border-collapse: collapse; 
 
    border-bottom: 1px solid #f44336; 
 
    
 
    font-family: sans-serif; 
 
} 
 

 
/* Header */ 
 
.myTable thead th { 
 
    background: #f44336; 
 
    color: #fff; 
 
    padding: 3em 1em 1em 1em; 
 
    
 
    font-weight: 400; 
 
    text-align: left; 
 
} 
 
.myTable thead th:nth-child(1) { 
 
    font-weight: 600; 
 
} 
 

 
/* Rows */ 
 
.myTable tbody tr td { 
 
    padding: 1em; 
 
} 
 
.myTable tbody tr:nth-child(even) td { 
 
    background: #ffcdd2; 
 
} 
 
.myTable tbody tr td:nth-child(1) { 
 
    font-weight: 600; 
 
}

<table class="myTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Row 1</th> 
 
     <th>Row 2</th> 
 
     <th colspan="2">Row 3 and 4</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1,1</td> 
 
     <td>1,2</td> 
 
     <td>1,3</td> 
 
     <td>1,4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2,1</td> 
 
     <td>2,2</td> 
 
     <td>2,3</td> 
 
     <td>2,4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3,1</td> 
 
     <td>3,2</td> 
 
     <td>3,3</td> 
 
     <td>3,4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4,1</td> 
 
     <td>4,2</td> 
 
     <td>4,3</td> 
 
     <td>4,4</td> 
 
    </tr> 
 
    </tbody> 
 
</table>