Course Content
HTML Basic Examples
In this chapter we will show some basic HTML examples. Don't worry if we use tags you have not learned about yet.
0/1
HTML Editors
A simple text editor is all you need to learn HTML.
0/1
HTML Basic Examples
In this chapter we will show some basic HTML examples.
0/1
HTML Elements
0/1
HTML Attributes
HTML attributes provide additional information about HTML elements.
0/1
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
0/1
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
0/1
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
0/1
HTML Text Formatting
HTML contains several elements for defining text with a special meaning
0/1
HTML Quotation and Citation Elements
0/1
HTML Comments
0/1
HTML Styles – CSS
0/1
HTML Favicon
0/1
HTML Page Title
0/1
HTML Block and Inline Elements
0/1
HTML Div Element
0/1
HTML class Attribute
0/1
HTML id Attribute
0/1
HTML Iframes
0/1
HTML JavaScript
0/1
HTML File Paths
0/1
HTML – The Head Element
0/1
HTML Layout Elements and Techniques
HTML Tutorial
About Lesson

HTML tables can have borders of different styles and shapes.


How To Add a Border

To add a border, use the CSS border property on tableth, and td elements:

     
     
     

Example

table, th, td {
  border: 1px solid black;
}

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

     
     
     

Example

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

     
     
     

Example

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;

Round Table Borders

With the border-radius property, the borders get rounded corners:

     
     
     

Example

table, th, td {
  border: 1px solid black;
  border-radius: 10px;

Skip the border around the table by leaving out table from the css selector:

     
     
     

Example

th, td {
  border: 1px solid black;
  border-radius: 10px;

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

     
     
     

The following values are allowed:

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden     

Example

 th, td {
  border-style: dotted;

Border Color

With the border-color property, you can set the color of the border.

     
     
     

Example

 th, td {
  border-color: #96D4D4;
}