DonalOBrien.net
Tabs in HTML
28 March 2008 09:41
A couple of people have asked me how to do tabs in HTML (like above right). They are really quite simple and it really only involves changing some styles.

So, here goes:

1. Create an unordered list of the various tabs you want:

<ul class="tabTest">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>


2. Next we're going to change the style of the unordered list and its items:

ul.tabTest {
  border-bottom: 1px solid black;
}

ul.tabTest li {
  list-style-type: none; /* this removes the circle */
  float: left; /* ensures that the tabs appear in a row */
  border-style: solid;
  border-color: black;
  border-width: 1px 1px 0 1px; /* these three give a border on top, right and left */
  margin-left: 5px;
  padding: 0 4px;
}


That should be it. Below is an illustration of how this example works.


  • Tab 1
  • Tab 2
  • Tab 3




In a future installment, I'll discuss aligning the tabs on the right, rounded corners in Mozilla and playing with border styles, colours, etc. to get the tabs' style just right.