HTML Table Border
This page contains HTML table border code - HTML codes for specifying or changing the border of your tables within your blog or web page.
HTML table borders are specified using Cascading Style Sheets (CSS). To set the border of an HTML table, use the CSS border
property.
Typical Table Border
Here's a common way to set borders on a table:
This provides that "grid" like effect, where the border surrounds each cell as well as the whole table.
Like this:
Notice that I used border-collapse: collapse;
against the table
element. This collapses the border so that you don't see any space between the cells and the outside of the table.
Without Collapsing the Border
Here it is without collapsing the border. I've also applied the border against the table
element in order to demonstrate the effect:
You can see that I've also added padding to the th
and td
selectors but not to the table itself. If we include the padding against the table, we'd end up with extra padding between the outer cells and the outside of the table.
So we'd end up with this:
There's nothing wrong with that if that's what you want. However, if you don't want padding between the table and its cells, you'll need to apply the padding to just the cells.
Bottom Border
The above examples use the CSS border
property to set the borders. This is a shorthand property to set border width, style, and color on all sides of the table.
If you don't want the border to go all around the table (or if you want a different border on each side of the table), you can use any of the following properties: border-top
, border-right
, border-bottom
, and border-left
.
Here's an example of setting the border to only appear at the bottom of each table cell.
Border and Alternating Background Colors
A common usage of tables is for each row to have alternating background colors.
You can apply borders against these tables just like any other table:
No Border on Table Headers
You can also remove the border from the th
element.
You can either remove the border from the styles by using border: none;
against the th
selector (but it has to follow the border declaration), or just not apply the border in the first place.
Here's an example of the later:
Rounded Corners
Here's an example of adding a border with curved/rounded corners to the table. In the CSS3 specification, rounded corners are specified using the border-radius
property.
Note that we need to remove the border-collapse
property for this work.
I also set the border-spacing
property to zero, so that the cell borders continue smoothly without being interrupted by a space. Remove this property and click Run to see what I mean.
The Border Properties
CSS provides quite a number of border related properties to assist you in creating borders. These properties can be applied to any HTML element, not just tables.
For a full list of border properties, go to CSS Properties and filter by "border".
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties