weballey logo
 
left Layout - title bars backnext right
homesearchsite mape-mail
basics
columns
alignment
< title bars >
faster pages
my layout
epilogue
      With the help of tables you can create headers like the one at the top of this page. That one has images in it to create the rounded endings and the arrows. It just makes it look a bit nicer. But you don't really need them to make a header bar. As a bonus you won't need images, saving you bandwith and loading time again. The easiest way to do this bar, is to create a simple table, spanning the full width of the text column.

<TABLE BORDER="0" WIDTH="100%" BGCOLOR="Aqua">
<TR><TD>
header text
</TD></TR>
</TABLE>

header text

    The background color is done again with the BGCOLOR tag. Using the FONT tag you can give the text a different color. This way you can have a white text on a black header bar. Add a B tag to make the text stand out a bit more. A &nbsp; character can push the header a bit to the right. Increasing the cellpadding attribute will make the bar wider.

<FONT COLOR="white"><B>&nbsp; header text</B></FONT>

  header text

    Sometimes you may want to put a link in the title bar. The link colors are specified in the BODY tag. To accomodate the white background, you will probably have used dark colors. These will be nearly invisible on a dark background. Again the font tag comes to the rescue. A link can have any color you like. Just put the font tag inside the link tags, and around the text.

  header text link

    There's one thing you should know. Some older browsers don't display table background colors. You may consider them obsolete, but there are still some around. When using white text on a black background, these browsers will get white on white. They will see no text. You could use a light colored text to accomodate them. The page won't look look the same, but at least they can read it.

  header text

    Another thing to remember is browsers ignore text markup code outside the table. These browsers will revert the text to the default code set in your browser. Browsers generally use a Times Roman 12 point font. I use a helvetica font on my pages. To get this the same inside the title bar, you will need to repeat the codes you used outside the bar. The same is true for the whole table. You will need to specify fonts for all table cells, if you don't want to resort to the default font.

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right