在html中製作自定義表格

Question

是否可以製作HTML &這樣的CSS表格？

我想有（右）一個全高列，剩下的就是行作爲在圖像上。

Answer 1

是的，這可能與rowspan and colspan attributes。

Answer 2

你可以使用的div標籤，像這樣

<div class="container"> 

<div class="top"> //thead of the photo </div> 

<div class="bottom"> 

<div class="bottom-left"> 

放置更多的DIV標籤來表示行在這裏

</div> 

    <div class="bottom-right"> 

    THIS IS THE COLUMN 

</div> 


    </div> 




    </div> 

那麼對於樣式添加CSS到適當的大小。

希望這會有所幫助。

Answer 3

你可以用網格很容易實現這一點：

.thead { 
 
    padding: 5px; 
 
    grid-area: thead; 
 
    border: 3px solid gray; 
 
} 
 

 
.col { 
 
    grid-area: col; 
 
    border: 3px solid red; 
 
} 
 

 
.r { 
 
    border: 3px solid green; 
 
    padding: 5px; 
 
} 
 
.row-1 { 
 
    grid-area: row-1; 
 
} 
 
.row-2 { 
 
    grid-area: row-2; 
 
} 
 
.row-3 { 
 
    grid-area: row-3; 
 
} 
 
.row-4 { 
 
    grid-area: row-4; 
 
} 
 
.row-5 { 
 
    grid-area: row-5; 
 
} 
 

 
.container { 
 
    display: grid; 
 
    grid-template-columns: 2fr 1fr; 
 
    grid-template-areas: 
 
    "thead thead" 
 
    "row-1 col" 
 
    "row-2 col" 
 
    "row-3 col" 
 
    "row-4 col" 
 
    "row-5 col"; 
 
}

<div class="container"> 
 
     <div class="thead">thead</div> 
 
     <div class="col">Col</div> 
 
     <div class="r row-1">Row 1</div> 
 
     <div class="r row-2">Row 2</div> 
 
     <div class="r row-3">Row 3</div> 
 
     <div class="r row-4">Row 4</div> 
 
     <div class="r row-5">Row 5</div> 
 
</div> 
 
    
 

Grid-template-areas確實值得探討。