Home / Articles / Programming languages / Markup languages / HTML & CSS / Tables and borders in HTML

Tables and borders in HTML

Tables and borders in HTML
 
Tables and borders in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


To separate the contents of one cell from another, the borders are added. To create those use parameters border of the tag table, which determines the width of the border and bordercolor - which sets the color.

Example 1 shows how to create red border around the cells.

Example 1. Adding border to the table.

<table width="200" cellpadding="5" border="1" bordercolor="red">
  <tr>
    <td>Fifer</td>
    <td>Fiddler</td>
    <td>Practical</td>
  </tr>
</table>

Borders created in this way differ in appearance in different browsers, as shown in fig. 1.

Internet Explorer

Netscape

Opera

Border Internet Explorer

Border Netscape

Border Opera

Fig. 1. Border as a result of using the parameter border.

Netscape browser simulates a three-dimensional border, Opera leaves the color unchanged, and Internet Explorer makes the border look solid. Mozilla and Firefox will display the same type of border as Netscape.

To get identical borders, it's better to use the style attribute border, applying it to the cells (tag td or th). However, even here we can get an unpleasant surprise. Since the border is created separately for each cell, the contacting borders between the cells acquire double width. There are several ways to solve this problem. The easiest way is to use border-collapse set to the value collapse. Its task is to monitor contacting borders, and instead of a double border display only one. All you have to do is to add this attribute to the tag table (example 2).

Example 2. Using border-collapse to create borders.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      table {
        border-collapse: collapse; /* The border between  cells is displayed as one */
      }
      td {
        border: 2px solid green; /* Border parameters  around the cells */
        text-align: center; /* Centered alignment of the text */
      }
    </style>
  </head>
  <body>
    <table width="200" cellspacing="0" cellpadding="2">
      <tr><td>0</td><td>X</td><td>X</td></tr>
      <tr><td>0</td><td>0</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>0</td></tr>
    </table>
  </body>
</html>

The difference between the borders when adding the parameter border-collapse and without it is shown in fig. 2.

Using border collapase a

Using border collapase b

a

b

Fig. 2. How a table is displayed when using border-collapase.

Fig. 2a. shows the border by default. Please note that in this table all the borders have double width. Adding the border-collapse removes this feature, and the width of the borders becomes the same (fig. 2b).

To have consistent border width within the table you can use another way. Add to the selector td a border, but then cancel the lines to the right and below, setting the appropriate attributes to none. Then when the cells are adjoint their borders will not overlap, because there's actually only one line. However, when using this method of forming borders there are no lines at the bottom and to the right of the table. By adding the parameter border-right and border-bottom to the table, we will end up having the correct border (example 3). For consistency every time set the same style, width and color of the border.

Example 3. Setting borders with the attribute border.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      table {
        border-right: 2px solid green; /* The line to the right of the table */
        border-bottom: 2px solid green; /* The line below the table */
      }
      td {
        border: 2px solid green; /* Border parameters  around the cells */
        border-right: none; /* Canceling the line to the right */
        border-bottom: none; /* Canceling the bottom line */
        text-align: center; /* Centered alignment of the text in the cell */
      }
    </style>
  </head>
  <body>
    <table width="200" cellpadding="2">
      <tr><td>0</td><td>X</td><td>X</td></tr>
      <tr><td>0</td><td>0</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>0</td></tr>
    </table>
  </body>
</html>

This method may vary, for example, to the selector td add border line only to the right and bottom, and for table, conversely, add the attribute border, but remove the line to the right and bottom. The result will be the same.

Simple and original display of the table can be achieved if the border color matches the color of the background. But in order for the lines to be visible, be sure to add a background color with tags td or table. Then the cells of the table will look as if separated by a cutter (example 4).

Example 4. Using invisible borders in the table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      body {
        background: white; /* Background color of the Web page */
      }
      table {
        border-collapse: collapse; /* The lines between the cells are displayed as one */
      }
      td {
        border: 2px solid white; /* Border parameters around the cells  */
        background: #ccc; /* Color of the cells' background */
        text-align: center; /* Centered alignment of the text */
      }
    </style>
  </head>
  <body>
    <table width="200" cellspacing="0" cellpadding="2">
      <tr><td>0</td><td>X</td><td>X</td></tr>
      <tr><td>0</td><td>0</td><td>X</td></tr>
      <tr><td>X</td><td>X</td><td>0</td></tr>
    </table>
  </body>
</html> 

In this example, the background color of the web page is set by the property background, added to the selector body. Although white goes by default, it is sometimes better to specify this, that the user wouldn't change the background color in his browser. Table borders should have the same color, in this case their function is to separate the cells.

The result is shown below in the example 4.


 

Read also

Table parameters in HTML

Table parameters in HTML

Creating tables in HTML

Creating tables in HTML

Table alignment in HTML

Table alignment in HTML

Cell parameters in HTML

Cell parameters in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation