Captain Crunch Captain Crunch - 15 days ago 6
HTML Question

Square with tabs on each edge

Here I am, back again with my terrible ASCII skills! Some things in HTML are beyond me and I can't really understand how to put them together. I'm trying to achieve something like this:

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


How this will play out HTML doesn't work in my head. I can't visualize how the heck you'd put something on the top, then left, right, and bottom. It just doesn't make sense. Colspan and rowspan don't seem to be working, and I can't think of a way to do this without a gazillion
<tr>
and
<td>
tags.

Cheers,

Captain Crunch

Answer

You shouldntt use tables for layouts. Instead do it with 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>