htmlでカスタムテーブルを作成する

Question

HTMLで表を作ることは可能ですか& CSSはこのようにしますか？

私は（右側）1つのフルハイト列を持つようにしたい、残りは画像上のように行です。

Answer 1

はい、これはrowspan and colspan attributesで可能です。

Answer 2

HERE

</div> 

    <div class="bottom-right"> 

    THIS IS THE COLUMN 

</div> 


    </div> 




    </div> 

内の行を表すためにそう

<div class="container"> 

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

<div class="bottom"> 

<div class="bottom-left"> 

PLACE MORE DIVタグが続いて適切なサイズにスタイルのためのCSSを追加するようにあなたは、DIVタグを使用することができます。

これが役に立ちます。

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はに探して本当に価値があります。