HTML Table Borders

Output:

Table Borders Collapsed

Table Collapsed borders are a visual styling option for HTML tables where adjacent cell borders are merged or collapsed into a single border-line. Set the border property to the <table>, <td>, and <th> elements to achieve the table border effect.

Example: Illustration of the creation of Table Borders Collapsed.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
          HTML Table border collapsed 
      </title> 
    <style> 
        body { 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            width: 100%; 
            border: 1px solid #100808; 
            border-collapse: collapse; 
        } 
  
        th, 
        td { 
            border: 1px solid #413434; 
            padding: 10px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
       Table with Collapsed border 
    </h3> 
    <table> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Class</th> 
                <th> 
                    Roll No 
                </th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Mahima</td> 
                <td>10</td> 
                <td>1</td> 
            </tr> 
            <tr> 
                <td>Krishn</td> 
                <td>8</td> 
                <td>3</td> 
            </tr> 
            <tr> 
                <td>Shivika</td> 
                <td>8</td> 
                <td>5</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
  
</html>

Output:

Table Borders Style

Table Borders Style applies the border-collapse: collapse property to the <table>, <td>, and <th> elements, and sets the border and background-color properties for styling the table and its elements.

Example: Illustration of the Style Table border.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>HTML Table border-style</title> 
    <style> 
        body { 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            width: 100%; 
            border: 1px solid #100808; 
            border-collapse: collapse; 
        } 
  
        th, 
        td { 
            text-align: center; 
            border: 1px solid #413434; 
            padding: 10px; 
            background-color: rgb(181, 216, 181); 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Table Border Style 
    </h3> 
    <table> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Class</th> 
                <th> 
                    Roll No 
                </th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Mahima</td> 
                <td>10</td> 
                <td>1</td> 
            </tr> 
            <tr> 
                <td>Krishn</td> 
                <td>8</td> 
                <td>3</td> 
            </tr> 
            <tr> 
                <td>Shivika</td> 
                <td>8</td> 
                <td>5</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
  
</html>

Output:

Rounded Table Borders

Rounded table borders make the corners of a table look smooth and curved instead of sharp and straight. This styling technique uses a design feature called “border-radius” to achieve the rounded effect. Apply the border-radius property to the <table>, <td>, and <th> elements to achieve rounded corners for the table borders.

Example: Illustration of the round shaped cells with the help of Table border.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>HTML rounded table</title> 
    <style> 
        body { 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            width: 100%; 
            border: 1px solid #100808; 
            border-radius: 20px; 
  
        } 
  
        th, 
        td { 
            text-align: center; 
            border: 1px solid #413434; 
            padding: 10px; 
            background-color: rgb(181, 216, 181); 
            border-radius: 40px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
          HTML rounded table 
    </h3> 
    <table> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Class</th> 
                <th> 
                    Roll No 
                </th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Mahima</td> 
                <td>10</td> 
                <td>1</td> 
            </tr> 
            <tr> 
                <td>Krishn</td> 
                <td>8</td> 
                <td>3</td> 
            </tr> 
            <tr> 
                <td>Shivika</td> 
                <td>8</td> 
                <td>5</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
  
</html>

Output:

border

Style Table border with border-style

The border-style property allows you to define different styles for table borders. The property contains different border styling including solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden.

Example: Illustration of the Styling the Table border with border-style.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>HTML Table using border-style</title> 
    <style> 
        body { 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            color: green; 
        } 
  
        table { 
            width: 100%; 
            border: 1px solid #100808; 
            border-radius: 12px; 
            border-color: #2df804; 
  
        } 
  
        th, 
        td { 
            text-align: center; 
            padding: 10px; 
            background-color: rgb(181, 216, 181); 
            border-radius: 40px; 
            border-style: dotted; 
            border-color: #f80404; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3> 
       HTML Table using border-style 
    </h3> 
    <table> 
        <thead> 
            <tr> 
                <th>Name</th> 
                <th>Class</th> 
                <th> 
                    Roll No 
                </th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>Mahima</td> 
                <td>10</td> 
                <td>1</td> 
            </tr> 
            <tr> 
                <td>Krishn</td> 
                <td>8</td> 
                <td>3</td> 
            </tr> 
            <tr> 
                <td>Shivika</td> 
                <td>8</td> 
                <td>5</td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
  
</html>

Output:

border5

Suggest improvement

HTML Table Headers

Share your thoughts in the comments

Syntax

Adding the Table Border

HTML

Table Borders Collapsed

HTML

Table Borders Style

HTML

Rounded Table Borders

HTML

Style Table border with border-style

HTML

Similar Reads

HTML Table Borders

Syntax

Adding the Table Border

HTML

Table Borders Collapsed

HTML

Table Borders Style

HTML

Rounded Table Borders

HTML

Style Table border with border-style

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?