CSS table border

Next Page >>
div class container

CSS Tutorial » CSS table border

Study in this chapter:
1. - explanations - How can you add border to CSS table?
2. - css table border-color
3. - css table border-radius
4. - css table border-collapse

HTML tables enhance the design of a web page and can have borders of different styles and shapes

The border of the table is added with the property css border as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements

Syntax:

Syntax: Internal & External CSS.

table, th, td { border: value;}

Inline CSS.

<tag style="border: value;">Yor text here</tag>

Note: use external CSS instead.

Example:

FirstName	LastName	Age
OdPeter	Pascual	29
Salwin	Langford	46

Browser Support

Element	Chrome	IE	Firefox	Opera	Safari
`border: value`	Yes	Yes	Yes	Yes	Yes

Table border radius

Using the border-radius: property, we can get the borders to become rounded corners:

Example:

<!DOCTYPE html>

  <html>

  <head>

  <style>
table, th, td {

  border: 2px solid blue;

  border-radius: 6px;

  padding: 6px;

  }

  th { background:#6CF

  }

  </style>

  </head>

  <body>
<h2>Table With Rounded Borders</h2>
<p>Adding rounded corners to

 the borders use CSS border-radius property.</p>
<table style="width:100%">

  <tr>

  <th>Firstname</th>

  <th>Lastname</th> 

  <th>Age</th>

  </tr>

  <tr>

  <td>Jilles</td>

  <td>Smithoh</td>

  <td>29</td>

  </tr>

  <tr>

  <td>EveMari</td>

  <td>Jaccksson</td>

  <td>46</td>

  </tr>

  <tr>

  <td>Johny</td>

  <td>Dove</td>

  <td>48</td>

  </tr>

  </table>
</body>

  </html>

CSS table border collapse

Using the border-collapse: property it is observed that the cells inside a <table> have shared or separate borders.

<!DOCTYPE html>

  <html>

  <head>

  <style>
table, th, td {

  border: 2px solid blue;

  padding: 6px;

  border-collapse: collapse;

  }

  th { background:#6CF;
 }

  </style>

  </head>

  <body>
<h2>Table With border-collapse: collapse;</h2>

<table style="width:100%">

  <tr>

  <th>Firstname</th>

  <th>Lastname</th> 

  <th>Age</th>

  </tr>

  <tr>

  <td>Jilles</td>

  <td>Smithoh</td>

  <td>29</td>

  </tr>

  <tr>

  <td>EveMari</td>

  <td>Jaccksson</td>

  <td>46</td>

  </tr>

  <tr>

  <td>Johny</td>

  <td>Dove</td>

  <td>48</td>

  </tr>

  </table>
</body>

  </html>

Example: border-collapse: separate;

<!DOCTYPE html>

  <html>

  <head>

  <style>
table, th, td {

  border: 2px solid blue;

  padding: 6px;

  border-collapse: separate;

  }

  th { background:#6CF;
 }

  </style>

  </head>

  <body>
<h2>Table With border-collapse: separate;</h2>

<table style="width:100%">

  <tr>

  <th>Firstname</th>

  <th>Lastname</th> 

  <th>Age</th>

  </tr>

  <tr>

  <td>Jilles</td>

  <td>Smithoh</td>

  <td>29</td>

  </tr>

  <tr>

  <td>EveMari</td>

  <td>Jaccksson</td>

  <td>46</td>

  </tr>

  <tr>

  <td>Johny</td>

  <td>Dove</td>

  <td>48</td>

  </tr>

  </table>
</body>

  </html>

Tags: table border radius, collapse, none, spacing, width, not showing, bottom, radius not working, inside, bottom only

border-spacing: property

Using border-spacing: property we can make the distance between the borders of adjacent cells.

Example:

<!DOCTYPE html>

  <html>

  <head>

  <style>

  table, td, th {

  border: 2px solid blue;

  }

  th{ background:#6CF

  }

  #table11 {

  border-collapse: separate;

  border-spacing: 10px;

  }
#table22 {

  border-collapse: separate;

  border-spacing: 20px 40px;

  }

  </style>

  </head>

  <body>
<h2>border-spacing: 10px:</h2>

  <p>When using "border-collapse: separate", 

   the border-spacing property can be used to set

    the space between the cells:</p>

  <table id="table1">

  <tr>

  <th>Firstname</th>

  <th>Lastname</th>

  </tr>

  <tr>

  <td>Peter</td>

  <td>Griffin</td>

  </tr>

  <tr>

  <td>Lois</td>

  <td>Griffin</td>

  </tr>

  </table>
<h2>border-spacing: 20px 40px:</h2>

  <p>Using two values (the first sets

   the horizontal spacing and the second sets

    the vertical spacing):</p>

  <table id="table2">

  <tr>

  <th>Firstname</th>

  <th>Lastname</th>

  </tr>

  <tr>

  <td>Peter</td>

  <td>Griffin</td>

  </tr>

  <tr>

  <td>Lois</td>

  <td>Griffin</td>

  </tr>

  </table>
</body>

  </html>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

table border-radius, collapse, none, spacing, width, not showing, bottom, radius not working, inside, bottom only
CSS Table Border. Examples of border-radius, collapse, spacing, width - css tutorial

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.