Updates
  • Starting New Weekday Batch for Java Full Stack Developer on 24th June 2024 @ 02:00 PM to 04:00 PM
  • Starting New Weekend Batch for Java Full Stack Developer on 06th July 2024 @ 11:00 AM to 02:00 PM
  • Starting New Weekday Batch for Java Full Stack Developer on 08th July 2024 @ 04:00 PM to 06:00 PM
  • Starting New Weekday Batch for Java Full Stack Developer on 29th July 2024 @ 10:00 AM to 12:00 PM
Number Converter Enquire Now
Join Course

Table Border

• To add borders to tables in HTML, you can use CSS (Cascading Style Sheets) properties.
• Select the table or specific elements within the table using CSS selectors, such as the table tag (<table>), row tag (<tr>), cell tag (<td>), or header tag (<th>).
• Apply the CSS border property to set the border style, thickness, and color. For example, border: 1px solid black; will create a solid black border with a thickness of 1 pixel.
• You can also apply specific border properties such as border-width, border-style, and border-color individually for more control.
• Use CSS classes or inline styles to target specific tables or table elements and customize their borders according to your design preferences. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Table Border</title>
    <style>
        table, th, td {
          border: 1px solid black;
        }
        </style>
</head>
<body>
    <h1>Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Som</td>
            <td>40</td>
        </tr>
	<tr>
            <td>Rahul</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

Border collapsed

• To create collapsed table borders in HTML, you can use CSS (Cascading Style Sheets) properties.
• Use the CSS border-collapse property and set it to collapse to achieve collapsed borders.
• Applying border-collapse: collapse; to the table element ensures that adjacent cells share borders, giving the appearance of a single border between cells. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Table Border</title>
    <style>
        table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        </style>
</head>
<body>
    <h1>Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Som</td>
            <td>40</td>
        </tr>
	<tr>
            <td>Rahul</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

Rounded Border

• To create round table borders in HTML, you can use CSS (Cascading Style Sheets) properties.
• Use the CSS border-radius property to specify the radius of the corners of the table.
• Apply the border-radius property to the table element and set it to a value that suits your desired roundness, such as border-radius: 10px;. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Table Border</title>
    <style>
        table, th, td {
	  width:200px;
          border: 1px solid black;
          border-radius: 10px;
        }
        </style>
</head>
<body>
    <h1>Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Som</td>
            <td>40</td>
        </tr>
	<tr>
            <td>Rahul</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

Note- You can remove the outer border of the table by removing table attribute from the Style selector.


Dotted Border

• To create a dotted table border in HTML, you can use CSS (Cascading Style Sheets) properties.
• Select the table or specific elements within the table using CSS selectors, such as the table tag (<table>), row tag (<tr>), cell tag (<td>), or header tag (<th>).
• Apply the CSS border-style property and set it to dotted to create a dotted border. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Table Border</title>
    <style>
        table, th, td {
            border: 3px;
            border-style: dotted;
            border-collapse: collapse;
        }
        </style>
</head>
<body>
    <h1>Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Som</td>
            <td>40</td>
        </tr>
	<tr>
            <td>Rahul</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

Here are some more Border Style Properties:-

1. Solid border style: border-style: solid
    • Creates a solid line as the border.
2. Dotted border style: border-style: dotted;
    • Creates a series of dots as the border.
3. Dashed border style: border-style: dashed;
    • Creates a series of short dashes as the border.
4. Double border style: border-style: double;
    • Creates two parallel lines as the border.
5. Groove border style: border-style: groove;
    • Creates a 3D groove effect as the border.
6. Ridge border style: border-style: ridge;
    • Creates a 3D ridge effect as the border.
7. Inset border style: border-style: inset;
    • Creates a 3D inset effect as the border.
8. Outset border style: border-style: outset;
    • Creates a 3D outset effect as the border.

Border color

• To set border colors in tables in HTML, you can use CSS (Cascading Style Sheets) properties.
• Select the table, row, cell, or header elements using CSS selectors, such as the table tag (<table>), row tag (<tr>), cell tag (<td>), or header tag (<th>).
• Apply the CSS border-color property to set the color of the table borders. For example, border-color: red; will set the border color to red. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Table Border color</title>
    <style>
        table, th, td {
	        width:200px;
            border: 3px;
            border-style: solid;
	        border-color: red;
            border-collapse: collapse;
        }
        </style>
</head>
<body>
    <h1>Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Som</td>
            <td>40</td>
        </tr>
	<tr>
            <td>Rahul</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>


We use cookies to enhance your user experience. By continuing using our site, you agree to our use of cookies.

Ok Read More