CSS table border

Next Page >>
CSS tutorial

CSS Tutorial » CSS Table border

Using CSS easy you can style tables where can have different borders styles and shapes.

How do you add different borders styles and shapes CSS?

ID	Nombre	Apellido	Email
1	Clark	Kent	clarkkent@mail.com
2	John	Carter	johncarter@mail.com
3	Peter	Parker	peterparker@mail.com

Browser Support CSS cell width and height

Element	Chrome	IE	Firefox	Opera	Safari
Browser Support option	Yes	Yes	Yes	Yes	Yes

How To Add CSS Table a Border

For the next example we add a border to a table and also borders around each table cell. Adding border, we used the CSS border property on table, th, and td elements.

For a better understanding we present an example:

Example (this is HTML - PHP editor, change text, values on this window)

<!DOCTYPE html>

  <html>

  <head>

  <title>css rounded corners button link shadow - example</title>

  <style>

  table, th, td {

  border: 1px solid blue;

  }

  </style>

  </head>

  <body>
<h2>Table Border</h2>

  <p>CSS border property add border to the table</p>

  <table align="center" style="width:99%">

  <thead>

  <tr style="background:#0C0">

  <th style="padding:8px; border:2px solid blue">ID</th>

  <th style="padding:8px; border:2px solid blue">Nombre</th>

  <th style="padding:8px; border:2px solid blue">Apellido</th>

  <th style="padding:8px; border:2px solid blue">Email</th>

  </tr>

  </thead>

  <tbody>

  <tr style="border:thin #FFF; background: #CCC">

  <td>1</td>

  <td>Clark</td>

  <td>Kent</td>

  <td>clarkkent@mail.com</td>

  </tr>

  <tr>

  <td>2</td>

  <td>John</td>

  <td>Carter</td>

  <td>johncarter@mail.com</td>

  </tr>

  <tr style="border:thin #FFF; background: #CCC">

  <td>3</td>

  <td>Peter</td>

  <td>Parker</td>

  <td>peterparker@mail.com</td>

  </tr> 

  </tbody>

  </table>

  </body>

  </html>

Note: The table cannot be centered if the width is set in percentage as 100%

Tags: css table border radius, color, collapse, none, between cells, spacing, not showing, bottom, radius, not working, inside.

CSS Table Border radius

How do you add a border to a table in CSS?

To get rounded corners use the border-radius property to achieve the desired effect:

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <head>

  <title>css rounded corners button link shadow - example</title>

  <style>
 table, th, td {

  border: 2px solid blue;

  border-radius: 10px;

  }
 </style>

  </head>

  <body>
<h2>Table Border radius</h2>

  <p>To get rounded corners use the border-radius property</p>

  <table align="center" style="width:99%">

  <thead>

  <tr style="background:#0C0">

  <th style="padding:8px; border:2px solid blue">ID</th>

  <th style="padding:8px; border:2px solid blue">Nombre</th>

  <th style="padding:8px; border:2px solid blue">Apellido</th>

  <th style="padding:8px; border:2px solid blue">Email</th>

  </tr>

  </thead>

  <tbody>

  <tr style="border:thin #FFF; background: #CCC">

  <td>1</td>

  <td>Clark</td>

  <td>Kent</td>

  <td>clarkkent@mail.com</td>

  </tr>

  <tr>

  <td>2</td>

  <td>John</td>

  <td>Carter</td>

  <td>johncarter@mail.com</td>

  </tr>

  <tr style="border:thin #FFF; background: #CCC">

  <td>3</td>

  <td>Peter</td>

  <td>Parker</td>

  <td>peterparker@mail.com</td>

  </tr> 

  </tbody>

  </table>

  </body>

  </html>

In this chapter you can easily learn how:
How do you add a border to a table in CSS?
How do you add a border to a table in HTML?
How do I change the color of a table in CSS?
How do I style a table column in CSS?

Collapsed Table Borders CSS

To avoid double borders when designing a table, you need to set the CSS border-collapse property to collapse.
This will cause the borders where they are doble to remain in a single border

Example (this is HTML - PHP editor, change text on this window)

<!DOCTYPE html>

  <html>

  <head>

  <title>css rounded corners button link shadow - example</title>

  <style>
table, th, td {

  border: 2px solid blue;

  border-collapse: collapse;

  }
 </style>

  </head>

  <body>
<h2>Table Border collapsed</h2>

  <p>Set CSS border-collapse property to collapse</p>

  <table align="center" style="width:99%">

  <thead>

  <tr style="background:#0C0">

  <th style="padding:8px; border:2px solid blue">ID</th>

  <th style="padding:8px; border:2px solid blue">Nombre</th>

  <th style="padding:8px; border:2px solid blue">Apellido</th>

  <th style="padding:8px; border:2px solid blue">Email</th>

  </tr>

  </thead>

  <tbody>

  <tr style="border:thin #FFF; background: #CCC">

  <td>1</td>

  <td>Clark</td>

  <td>Kent</td>

  <td>clarkkent@mail.com</td>

  </tr>

  <tr>

  <td>2</td>

  <td>John</td>

  <td>Carter</td>

  <td>johncarter@mail.com</td>

  </tr>

  <tr style="border:thin #FFF; background: #CCC">

  <td>3</td>

  <td>Peter</td>

  <td>Parker</td>

  <td>peterparker@mail.com</td>

  </tr> 

  </tbody>

  </table>

  </body>

  </html>

css table border radius, color, collapse, none, between cells, spacing, not showing, bottom, radius, not working, inside.
CSS table border radius - 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.