Using the differing precedences of row, column and cell borders to style a table : table border « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. table border

Using the differing precedences of row, column and cell borders to style a table

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Using the differing precedences of row, column and cell borders to style a table</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border-style: none hidden;
      margin: 1em 0 0 0;
      border-collapse: collapse;
    }
    td {
      width: 6em;
      vertical-align: baseline;
      padding: 0 0.5em;
      border: 1px dashed black;
    }
    tbody {
      border: 2px solid black;
    }
    tr {
      border: 1px solid black;
    }
    colgroup {
      border: 4px solid black;
      border-style: none solid;
    }
    col#col1 {
      border-color: black;
      border-width: 1px;
      border-style: none solid;
    }
  </style>
</head>
<body>
  <table>
    <colgroup>
      <col id="col1"/>
      <col />
    </colgroup>
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
      <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
      </tr>
    </tbody>
  </table>
</body>
</html>








Related examples in the same category

1.Set table border
2.Collapsed Borders
3.table border-width: medium;
4.table border-color: navy;
5.table border groove
6.border-collapse: separate
7.border-collapse: collapse
8.using border-spacing to create space between cells in a table
9.border-spacing: 0.5em
10.Set table right and bottom border to solid
11.Add border spacing
12.Add border spacing for only top and bottom
13.Add border space to column
14.Separated Borders
15.Boxed Cells
16.Left table border
17.Right table border
18.Top table border
19.Bottom table border
20.'border' sets the thickness in pixels of the border around an element
21.'bordercolor' specifies the color of the element border
22.'bordercolordark' defines the darker shade of the border color
23.'bordercolorlight' Example
24.'frame' determines how to display a table's border frame
25.'rules' controls which portions of a table's borders are displayed
26.Set table border to collapse, 1px solid black
27.table border-style: solid;
28.table border-color: #999999;
29.table border: 1px solid #C5B798;
30.Using a table to display border styles
31.table border: 1px solid black;
32.table border: thin solid black;table-layout: auto;
33.table {border-collapse:separate;}
34.table border-spacing:2px 8px;
35.Using CSS for Table Borders
36.table border: 1px solid #d8d8d8;
37.table border: 1px solid mediumslateblue;
38.table border-collapse: collapse;
39.table border: 1px solid rgb(200, 200, 200);
40.table border-spacing: 15px;
41.table border-spacing: 0 15px;
42.table border-spacing: 15px 0;
43.Table border and cell border