Tag: CSS tables

CSS Collapse Table Borders

Please Share On:

Definition:

CSS collapse table border properties specify the table border should collapse or not. See below the example of collapse table borders.

Syntax:

border-collapse: collapse;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}

table, th, td {
  border: 1px dashed red;
}
</style>
</head>

<body>
<h3>Example of CSS Collapse border table </h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>
</body>
</html>

Output:

Difference between CSS Table Borders and CSS Collapse Table Borders

See the below output of CSS table borders and CSS collapse table borders for better understanding.

You may be interested in the following topics:

CSS Table Borders

Please Share On:

Definition:

CSS table border properties are used to change the look of HTML tables. If you have read about CSS borders yet, then you first go to the border chapter and know more about the border and use their properties in CSS. “Click Here”, it will take you to the border chapter.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px dashed red;
}
</style>
</head>

<body>
<h3>Example of CSS border table </h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>
</body>
</html>

Output:

You may be interested in the following topics:

CSS Table (All Properties)

Please Share On:

Definition:

CSS table properties are used to change the look of HTML tables. Here, you can see almost all CSS tables properties in the below table.

CSS Tables Properties:

CSS Tables PropertiesDescription
1. CSS Table BordersSet the border properties
2. CSS Collapse Table BordersSpecifies the border tables should collapsed or not
3. CSS Table WidthSet the table width
4. CSS Table HeightSet the table height
5. CSS Table PaddingSet the space between the border and the contents
6. CSS Table ColorSet the table color
7. CSS Horizontal AlignmentAlign the table’s content horizontally
8. CSS Vertical AlignmentAlign the table’s content vertically
9. CSS Horizontal DividersSet the horizontal dividers
10. CSS Vertical DividersSet the vertical dividers
11. CSS Hoverable TablesChange the table row effect on mouse hover
12. CSS Striped TablesCreate a striped table row

You may be interested in the following topics:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial