XHTML Tutorial
XHTML Tags Types
XHTML Documents
First Web Page
Page Content
List Structure
Styles
Color Styles
Span and Division
Style & Classes
Font Tags
Special Characters
Lists Style
Element Position
Text Links
Redirecting Pages
Traversing Folders
Tables
Table Borders
Table Colors
Table Groupings
Creating Framesets
Form Controls
Group Boxes
Form Submission


Free Tutorials
Internet
What is Internet
Internet Games
Learn TCP IP
HTML
Learn HTML
Learn DHTML
Learn CSS
Learn XML
Learn XHTML
Learn WML
Database
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Programming
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt
Table Borders

Previous Next


When a table is defined by a <table> tag with no styles specified, a borderless table as wide as its enclosed data is displayed.

Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

From this simple beginning you can structure and style a table to take on virtually any display characteristics you can imagine.

Table Border Styles

Any of the border styles that were introduced earlier can be applied to the outer border of a table. Below are example border styles coded in the general fashion,

<style>
  table { border:style 5px }
  td    { border:inset 1px }
</style>

where the border style is identified below for each of the tables. The style sheet uses the general format {border:style size color} for all border stylings.

inset
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
outset
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
ridge
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
groove
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
dashed
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
dotted
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
solid
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
double
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2

All of the above tables have a outer border of 5 pixels to make then visually obvious. Different effects can be achieved with different border sizes.

Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2

Individual Border Styles. In the above examples borders appear around all four sides of the table. You can, however, specify individual styling for the separate sides. Use the properties border-top, border-bottom, border-left, and border-right to selectively apply borders around the table. The accompanying table, for example, displays only top and bottom borders with the following style sheet.

<style>
  table { border-top:outset 5px; border-bottom:outset 5px }
  td    { border:inset 1px }
</style>

Collapsed Borders. Borders surrounding the cells in a table are normally displayed separately from each other. That is, the default border setting for the table is border-collapse:separate, framing each cell separately and giving a "double border" look to the cells. By specifying border-collapse:collapse for the table, cells share "single borders" between them. This effect is illustrated in the following tables styled as above but with collapsed borders.

<style>
  table { border:style 5; border-collapse:collapse }
  td    { border:solid 1 }
</style>

inset
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
outset
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
ridge
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
groove
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
dashed
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
dotted
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
solid
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
double
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2

When table borders are collapsed, cell border styles are ignored, collapsed to a single-line style. Therefore, border:solid is the only recognized cell border style.

Cell Border Styles

Borders around table cells are styled independently from the outer border. The same set of border styles can be applied. In the following examples the outer border is 1 pixel in width and cell borders are 3 pixels in width to emphasize their styling. Note that table borders cannot be collapsed to view cell borders.

<style>
  table { border:solid 1px }
  td    { border:style 3px }
</style>

inset
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
outset
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
ridge
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
groove
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
dashed
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
dotted
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
solid
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2
double
Cell 1.1 Cell 1.2
Cell 2.1 Cell 2.2

Selective Border Styles. Borders surrounding cells can be selectively applied with border-top, border-bottom, border-left, and border-right styles. These styles are normally used to display top-and-bottom or left-and-right borders to emphasize the rows or columns of the table. The following two tables are displayed with the style sheets:

<style>
  table { border:outset 5px; border-collapse:collapse }
  td    { border-top:solid 2px; border-bottom:solid 2px }
</style>

<style>
  table { border:outset 5px; border-collapse:collapse }
  td    { border-left:solid 2px; border-right:solid 2px }
</style>

top-and-bottom
Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3
left-and-right
Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

In order to extend row and column borders across the entire table, borders must be collapsed. Otherwise, breaks in the lines appear between the separate cells. As meantioned above, collapsed borders also means that the various cell border styles do not display. Therefore, a solid border style is the only one that need be used for the cells.

Individual Border Styles. Cell borders can be styled independently. If needed, each cell can have a different border style. Usually, though, only selected cells are given emphatic borders to highlight their contents. Of course, in order to view cell borders the table border cannot be collapsed.

The following table displays different cell borders along its bottom row. This output can be achieved by applying in-line style sheets to the selected cells. However, this is the type of situation especially made for the use of ID selectors and contextual selectors. Complete table and style sheet coding is shown below.

Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

<style>
  table#TAB1            { border:outset 3px }
  table#TAB1 td         { border:inset 1px }
  table#TAB1 tr#ROW3 td { border:outset 3px }
</style>

<table id="TAB1">
<tr>
  <td>
Cell 1.1</td>
  <td>
Cell 1.2</td>
  <td>
Cell 1.3</td>
</tr>
<tr>
  <td>
Cell 2.1</td>
  <td>
Cell 2.2</td>
  <td>
Cell 2.3</td>
</tr>
<tr id="ROW3">
  <td>
Cell 3.1</td>
  <td>
Cell 3.2</td>
  <td>
Cell 3.3</td>
</tr>
</table>

The table itself is assigned an id in order to uniquely identify it among other tables on the page. Also, the final row of the table is given an id to uniquely identify it among the other rows of the table. This is the row in which special border styling is applied to its cells.

Within the style sheet the table is given an outer border style through the ID selector table#TAB1, selecting the <table> tag with id="TAB1" for application of the border style. The contextual selector table#TAB1 td applies a 1-pixel inset border to all cells of this table -- i.e., where a <td> tag is contained within a <table> tag for a table with id="TAB1".

A contextual selector is also used for styling the last row of the table. A 3-pixel outset border is applied with the selector table#TAB1 tr#ROW3 td -- i.e., where a <td> tag is contained within a <tr> tag with id="ROW3", which is contained within a <table> tag with id="TAB1".

If only a single cell has its borders styled, then that cell can be given an id, say, id="CELL9". Then the selector for styling that cell would be

table#TAB1 td#CELL9 {border:outset 3px}

Apply the border where a <td> tag with id="CELL9" is contained with a <table> tag with id="TAB1". It would not be necessary in this case to identify the table row.



Deprecated Table Attributes

Borders are displayed around the table and between table cells with the border="n" attribute of the <table> tag, where n is the width of the outer border in pixels. The following table has 1-pixel borders:

<table border="1">
Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

Changing the width of the outer border does not effect the size of cell borders. The default style of the outer border is "outset"; the default style of inner borders is "inset":

<table border="5">
Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

Previous Next





|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |



2013 Soft Lookup Corp. Privacy Statement