=>Table in CSS:

  • The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
  • Each row and column can have a heading that identifies the type of information contained in the row and column.
  • Intersection of the row and the column is known as cell, which stores data that is displayed in the table.
  • A table helps in presenting complex data in a readable format. 
  • The <table> tag defines an HTML table. 
  • Each table row is defined with a <tr> tag. 
  • Each table header is defined with a <th> tag. 
  • Each table data/cell is defined with a <td> tag.
  • Attributes of these tags help you to control alignment, spacing, background color etc. of the cell.
  • After creating table in HTML , you can easily insert or remove data as per requirements.

Table Borders:
  • To specify table borders in CSS, use the border property. 
  • The example below specifies a black border for <table>, <th>, and <td> elements: 
Example : 

table, th, td 

{ 
  border: 1px solid black; 
}


Collapse Table Borders:
  • The border-collapse property sets whether the table borders should be collapsed into a single border:
Example : 

table 
{ 
  border-collapse: collapse; 
} 

table, th, td 
{ 
  border: 1px solid black; 
}

  • If you only want a border around the table, only specify the border property for <table>:
Example : 

Table 
{ 
  border: 1px solid black; 
}

Table Width and Height:
  • Width and height of a table are defined by the width and height properties. 
  • The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

Example : 

table 
{
  width: 100%; 
} 
th 
{ 
  height: 50px; 
}
Horizontal Alignment:
  • The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. 
  • By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned. 
  • The following example left-aligns the text in <th> elements:
Example : 

Th 
{ 
  text-align: left; 
}
Vertical Alignment:
  • The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. 
  • By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements). 
  • The following example sets the vertical text alignment to bottom for <td> elements:
Example :

td 
{ 
  height: 50px; 
  vertical-align: bottom; 
}
Table Padding:
  • To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:
Example :

th, td 
{ 
  padding: 15px; 
  text-align: left; 
}
  • The following is a list of the CSS you can use in tables, the tags you can use them with, and a brief description of each:

  • The border-spacing specifies the width that should appear between table cells.
  • The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.
  • The empty-cells specifies whether the border should be shown if a cell is empty.