在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确实值得探讨。