Borders and Rules - HTML

The border around HTML tables and in between cells can be configured in many ways. The following sections cover the various ways you can configure table borders and rules.

Table borders
You can use the border attribute of the <table> tag to configure the outside border of the table. For example, consider the following code containing three tables and the resulting output.

Examples of table border widths.

Examples of table border widths.

The border attribute’s value specifies the width of the border in pixels. The default border width is 0, or no border.

Tip:Borders are an effective troubleshooting tool when dealing with table problems in HTML. If you are having trouble determining what is causing a problem in a table, try turning on the orders to better visualize the individual rows and columns. If you are using nested tables, turn on the borders of tables individually until you narrow down the scope of the problem. To specify which outside borders are displayed, use the frame attribute with one of the values displayed .

Values to Use with the Frame Attribute

Values to Use with the Frame Attribute

Note:Not all user agents follow the defaults for table borders (no borders, or box/border when a border width is specified). If you want a table to show up with particular formatting, take care to specify all options.

Table rules
You can use the rules attribute of the <table> tag to control what rules (borders between cells) are displayed in a table. Table shows the rules attribute’s possible values.

Note: that the width of rules is governed by the table spacing attribute. For example, setting cellspacing to a value of 5px results in rules 5 pixels wide.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics