CSS Tables

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Tables

CSS tables are a powerful way to organize and display data on a website. They allow for the creation of complex layouts and can be used to present data in a visually appealing and organized manner. CSS tables are composed of HTML elements that are styled with CSS.

In order to create a table, you will need to use the HTML
element. Within the
element, you can define the table’s columns and rows using the element that defines the table row and the elements. The
element defines the table data. You can also use the
element to define the table header. Once the table is defined, you can use CSS to style the table.

• Table Borders: Use the border property to define a border for a table.

table{
   border:1px solid dotted;  
}

• Collapse Table Borders: The CSS-border-sharing property determines what the cells inside the <table> look like. This property can take the following values:

border-collapse: separate|collapse|initial|inherit;

table{
   border-collapse: collapse; 
}

• Table Width and Height: To define the height and width of the table, the height and width property is used.

table{
  width: 100%;
  height:400px;
}

• Responsive Table: For a table to be responsive, simply display a horizontal bar for situations where the width or height of the screen is smaller than the table.

div{
   overflow-x: auto;
   overflow-y: auto;
}