Question

I’m new to HTML and I’m wondering if there are efficient ways other than brute force using white-spaces to create the following sample table:

I’ve tried making it but the code was not pretty. I would appreciate much of your help and tips.

Answer 1

HTML:

<table>
  <tr><td class="lcol"></td><td class="mcol"></td><td class="rcol"></td></tr>
  <tr><td class="mrow"></td><td></td><td></td></tr>
  <tr><td class="brow"></td><td></td><td></td></tr>
</table>

CSS:

.lcol { width: 40px; height: 40px; }
.mcol { width: 400px; }
.rcol { width: 40px; }
.mrow { height: 400px; }
.brow { height: 40px; }

Obviously adjust the pixel sizes as required. You can use “%” too if you want to fit to page.

Edit: If you want the borders displayed, then in css:

table { border-collapse: collapse; border: 1px solid #000; }
td { border: 1px solid #000; margin: 0; }