CSS Tables

CSS Tables


CSS Table 
Border Property -
We can also add borders to the HTML table using border property.
Syntax - 
border : value;
Now we will see example - 
Example - 
<!DOCTYPE html>
<html lang="en">
<style>
li {
list-style-position: inside;
}
</style>


<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
      <table border = "1">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
       
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 5, Column 1</td>
            <td>Row 5, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 6, Column 1</td>
            <td>Row 6, Column 2</td>
        </tr>
   
   
        </table>
   
  </body>
</html>
     
</body>

</html>
Output - 
As we can see there is a double border we can remove this using the border-collapse property.
Example - 
Output-