各辺のタブが付いている正方形

Question

ここで私はひどいASCIIスキルを持っています！ HTMLの中のいくつかのものは私の外にあり、私はそれらをまとめる方法を本当に理解できません。私はこのような何かを達成しようとしています：

 + + + + + + 
     + T A B + 
    + + + + + + + + 
+ + +    + + + 
+ T + MAIN  + T + 
+ A +    + A + 
+ B +    + B + 
+ + +    + + + 
    + + + + + + + + 
     + T A B + 
     + + + + + + 

これは私の頭の中で動作しませんどのように再生されます。私はあなたが何かを上、左、右、そして下に置く方法を視覚化することはできません。それは意味をなさない。 Colspanとrowspanは機能していないようで、gazillionの<tr>と<td>というタグがなければ、これを行う方法は考えられません。

乾杯、あなたはレイアウトのためにテーブルを使用shouldntt

キャプテンクランチ

Answer 1

。代わりにCSSを使ってください。

.container{ 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    background: red; 
 
    margin: 50px; 
 
} 
 

 
.tab{ 
 
    position: absolute; 
 
    background: blue; 
 
    color: #FFF; 
 
} 
 

 
.tab:nth-child(1), 
 
.tab:nth-child(2){ 
 
    width: 100%; 
 
    height: 50%; 
 
    left: 0; 
 
} 
 

 
.tab:nth-child(3), 
 
.tab:nth-child(4){ 
 
    height: 100%; 
 
    width: 50%; 
 
    top: 0; 
 
} 
 

 
.tab:nth-child(1){ 
 
    top: -50%; 
 
} 
 

 
.tab:nth-child(2){ 
 
    bottom: -50%; 
 
} 
 

 
.tab:nth-child(3){ 
 
    right: -50%; 
 
} 
 

 
.tab:nth-child(4){ 
 
    left: -50%; 
 
}

<div class="container"> 
 
    <div class="tab">Tab 1</div> 
 
    <div class="tab">Tab 2</div> 
 
    <div class="tab">Tab 3</div> 
 
    <div class="tab">Tab 4</div> 
 
</div>