AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

CSS table border


<< Previous Page
CSS tutorial
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 browser
 Chrome
ie browser
 IE
firefox browser
 Firefox
opera browser
 Opera
safari browser
 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%

Related subjects:
CSS table CSS table border Padding top bottom left right CSS Table Padding CSS Table size width and height

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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


CSS Scrollbar Horizontal
CSS Scrollbar in Div
CSS Scrollbar Firefox
CSS Style Scrollbar
CSS Style Text
CSS background color
CSS Div Id Class
CSS Text Wrap
CSS text-align
CSS Text Decoration
CSS Text Shadow
CSS Text Color
CSS Text Bold
CSS Text Size
CSS background image full
CSS background opacity
CSS border radius
CSS rounded corners
CSS font color
CSS Class & ID
CSS align image center
CSS align content
CSS link color
CSS Text Style
CSS Text Font Size
CSS max width &height
CSS width and height
CSS Margin
CSS Padding
CSS Border Style
CSS background
CSS in HTML
Basic Syntax of CSS
CSS Introduction
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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Create a Sticky Navbar with and without ...
CSS Grid Layout. Examples of grid-gap, l...
CSS animation examples: delay, rotate, s...
CSS font weight bold, thin, values, semi...
CSS background color - opacity, gradient...
CSS flex - display: flex - CSS Flexbox L...
CSS border padding...
HTML text center horizontally and vertic...
HTML text input <input type="text"&g...
HTML link color...
How to Link CSS to HTML, external file n...
HTML link - hyperlink...
jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...