
	Free Webmasters Resource
	Free Graphics, Tutorials, Scripts, Webmaster Forums, Web Templates, SEO Tools, & Much More!!

Table Styles

How to add various table styles such as dash or dot borders, and many other things.

First, make the table you want to dress up.

<table width="330" cellpadding="0" cellspacing="4">
  <tr>
    <td>
      This is the table we are going to pimpify.
    </td>
  </tr>
</table>

The next step is to add you elements of style. You need to add something like this to your <td> tag:

style="border-top:1px #000000 dashed;border-bottom:1px #000000
dashed;border-right:1px #000000 solid;border-left:1px #000000 solid;"

Using something like the above code would give you a border like my table on the bottom of the page. There are a few different options you can play around with though. Here is a quick run down of some other styles.

borders - affects whether or not the border is shown:
You can use them for all different sides. Such as:

    border-top
    border-right
    border-bottom
    border-left

border-width set the width, use the below:

    border-top-width
    border-right-width
    border-bottom-width
    border-left-width

border-style set the style of the border:

    border-top-style
    border-right-style
    border-bottom-style
    border-left-style

border-color no surprise here, set the color:

    border-top-color
    border-right-color
    border-bottom-color
    border-left-color

You can add different border types, including dotted, dashed, or just solid. Say, if you want a table with only left and right blue borders, one dotted and one dashed you'd use something like this:

style="border-right:1px #0066CC dashed;
style="border-left:1px #0066CC dotted;

Now all thats left to do is put it all to use. After you make the code, make sure you preview it, because it is easy to mess up. Try something like:

This table was made with this code:

<table>
  <tr>
    <td style="border-top:1px #000000 dashed;border-bottom:1px #000000 dashed;border-right:1px #000000 solid;border-left:1px #000000 solid;">
      This table was made with this code:
    </td>
  </tr>
</table>

Tutorials: HTML
Title/Description	Level
Backgrounds: Tutorial Learn how to effectively add backgrounds to your page that make your page look professional or amateur.	Beginner
Imagemaps: Tutorial Make one image into various clickable regions using only HTML	Intermediate
Embedding Fonts: Tutorial Learn how to use uncommon fonts in web pages by embedding them.	Advanced
Images: Tutorial Positioning images can make your images look just right when inserted into text.	Intermediate
Form Effects: Tutorial Learn how to create trendy forms with simple style commands as well as with CSS classes.	Intermediate
Layers: Tutorial Layers can make complicated image placement possible.	Advanced
Forms: Tutorial Use forms to gather information from your users.	Advanced
Links: Tutorial Making links in HTML is the easiest thing you will ever do.	Beginner
Frames: Tutorial Learn how to create frames that enable you to create navigation systems on your site.	Advanced
Scrollbars: Tutorial Learn how to add effects to your scrollbars and add flavor to your page.	Advanced
Hide From Print: Tutorial Learn how to only allow a visitor to print part of your page using CSS.	Intermediate
SSI: Tutorial Learning how to do SSI will save you a lot of authoring time.	Advanced
Horizontal Line: Tutorial The horizontal line serves as a great separator tool.	Beginner
Table Styles: Tutorial Learn how to add various table styles such as dash or dot borders, and many other things.	Intermediate
Iframes: Tutorial Iframes can organize your website into clean sections.	Advanced
Tables: Tutorial Organize your web page layouts with tables.	Intermediate
216 Web Safe Color Chart: Tutorial The 216-color color-safe palette refers to colors (RGB values) that will appear the same on either IE or Netscape and Windows or Mac platforms.	Beginner
Pantone RGB/Hex/HTML Colors: Tutorial This table contains all pantone colors converted to RGB and Hex. It displays them all in HTML colors.	Intermediate

Templates Resource Hosting
Domain Names · Templates Resource

Reptile Supplies | Montana Music | Mobile Phones | Personal Loans | Debt Help

Free Graphics, Tutorials, Scripts, Webmaster Forums, Web Templates, SEO Tools, & Much More!!

Table Styles

Tutorials: HTML

Title/Description

Level