How to Fix Table Borders in HTML

When designing a webpage in Hypertext Markup Language (HTML), you may want to display data in a rectangular arrangement of rows and columns, as in a matrix. You need the "TABLE" tag. To set the rows and columns you use combinations of the "TR" and "TD" tags. For controlling the appearance of the borders you need to use the attributes, BORDER, FRAME and RULES inside the tags, and give them certain values.

Things You'll Need

• HTML tutorial

Instructions

1. Create an HTML page. Create a table with 2 rows and 3 columns in the center of the page. This is the table you will use to see how the various attributes affect the table borders.

2. Control the size of the outside border. Use "TABLE BORDER=integer." An integer of 0 makes all borders invisible. An integer of 1 or more changes the external border and keeps the internal borders to 1. Putting BORDER without a value defaults it to 1.

3. Eliminate the external border. Use, "TABLE BORDER=3 FRAME=VOID RULES=ALL." Eliminate the internal borders. Use, "TABLE BORDER=2 FRAME=BOX RULES=NONE" or "TABLE BORDER=2 FRAME=BORDER RULES=NONE."

4. Show only the top or bottom border. Use, "TABLE BORDER=7 FRAME=ABOVE RULES=NONE" or "TABLE BORDER=7 FRAME=BELOW RULES=NONE," respectively. Show only the left or right border. Use, "TABLE BORDER=3 FRAME=LHS RULES=NONE" or "TABLE BORDER=3 FRAME=RHS RULES=NONE," respectively.

5. Eliminate the internal or external borders. Use, "TABLE BORDER=3 RULES=NONE FRAME=BOX" or "TABLE BORDER=3 FRAME=VOID RULES=ALL," respectively. Show only the horizontal or vertical sides. Use, "TABLE BORDER=6 FRAME=HSIDES RULES=NONE" or "TABLE BORDER=6 FRAME=VSIDES RULES=NONE," respectively.

6. Show only the columns or only the rows. Use, "TABLE BORDER=9 RULES=COLS FRAME=BOX" or "TABLE BORDER=9 RULES=ROWS FRAME=BOX," respectively.

7. Control the color. To add a color, use "TABLE BORDER=8 BORDERCOLOR=RED." To split a border into a light and dark, use "TABLE BORDER=8 BORDERCOLORLIGHT=BLUE BORDERCOLORDARK=GREEN."

8. Read a more extensive tutorial if you want to make changes not covered here. To read a tutorial that covers all the capabilities of HTML borders, visit HTML Code Tutorial.

Tips & Warnings

• Remember to put your HTML tags and codes in carrots: "<" and ">".

Resources

• HTML Code Tutorial provides help for HTML tags.