CSS Tables Property

Table of Contents

CSS Tables Property

Collapse Table Borders

The border-collapse property sets the double table border into a single border.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {  
    border: 2px solid green;  
    border-collapse: collapse;  
} 
</style>
</head>
<body>
<h2>Table Borders Collapse</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Width and Height Property

Using Width set the width of table and using height property is set to the height of a table.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, td, th {
  border: 2px solid green;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  height: 100px;
}
td {
   height: 50px;
}
</style>
</head>
<body>
<h2>Table Width and Height</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

Horizontal Alignment

Using text-align property to set the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

Note:- By default, the <th> contents are center-aligned and the content of <td> elements are left-aligned.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
}
</style>
</head>
<body>
<h2>The Use of text-align Property</h2>
<table>
    <tr>
    <th>Full Name</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>Ravi Kumar </td>
    <td>O Level</td>
  </tr>
  <tr>
    <td>Sunil Singh</td>
    <td>A Level</td>
  </tr>
</tr>
</table>
</body>
</html>

Vertical Alignment

The vertical-align property is use to sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

Note:- The by default, the vertical alignment of the content in(for both <th> and <td> elements) a table is middle .

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid green;
}
table {
  border-collapse: collapse;
  width: 50%;
}
td {
  height: 40px;
  vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Padding Property

It is used to set the space between the border and the content in a table.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {  
    border: 1px solid red;  
    border-collapse: collapse;  
}  
th, td {
    padding: 20px;
}
</style>
</head>
<body>
<h2>The Table Padding Property</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Horizontal Dividers Property

Using the border-bottom property to set the Horizontal Dividers for <th> and <td> elements.

Example

<!DOCTYPE>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 10px;
  text-align: center;
  border-top: 1px solid green;
}
</style>
</head>
<body>
<h2>Horizontal Dividers</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Hoverable Property

By use the :hover selector on <tr> or <td> to highlight table rows and cell on mouse over.

Example

<!DOCTYPE>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 10px;
  text-align: left;
  border: 1px solid red;
}
tr:hover {background-color: green;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Striped Table Property

If you want to the zebra-striped tables, you use the nth-child() selector and add a background-color to all even (or odd) table rows.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 10px;
}
tr:nth-child(even) {background-color: #8cabdb;}
tr:nth-child(odd) {background-color: #e0d5e6;}
</style>
</head>
<body>
<h2>Use of Striped Table</h2>
<table>
  <tr>
    <th>Sr No</th>
    <th>Full Name</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ravi Kumar</td>
    <td>O Level</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sunil Singh</td>
    <td>B Level</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Geeta Devi</td>
    <td>A Level</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Devi Prasad</td>
    <td>C Level</td>
  </tr>
</table>
</body>
</html>

CSS Responsive Table Property

If you want to a responsive table will display a horizontal scroll bar to Add a container element (like <div>) with overflow-x: auto around the <table> element to make it auto responsive table.

Example

<!DOCTYPE>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 10px;
}
tr:nth-child(even) {background-color: #b8d6c7;}
</style>
</head>
<body>
<h2>Use of Responsive Table</h2>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Sr No.</th>
      <th>Full Name</th>
      <th>Class</th>
      <th>Subject 1</th>
      <th>Subject 2</th>
      <th>Subject 3</th>
      <th>Subject 4</th>
      <th>Subject 5</th>
      <th>Subject 6</th>
      <th>Subject 7</th>
      <th>Subject 8</th>
      <th>Subject 9</th>
      <th>Subject 10</th>
      <th>Subject 11</th>
      <th>Subject 12</th>
      <th>Subject 13</th>
      <th>Subject 14</th>
      <th>Subject 15</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
      <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
      <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
      <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
  </table>
</div>
</body>
</html>

What is CSS?

What is CSS? CSS stands for Cascading Style Sheets.it saves a lot of work and it also control the layout ...

CSS Selectors

CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. CSS selectors are ...

Combinator selectors

Combinator selectors The Combinator selectors select elements based on a specific relationship between them. There are four different combinators selectors ...

Pseudo-class selectors

CSS Pseudo-class selectors Pseudo-class selectors select elements based on a certain state like . Style an element when a user ...

Pseudo-elements selectors

Pseudo-elements selectors It select and style a part of an element. They are two types: First-line pseudo-element First-letter pseudo-element First-line ...

Attribute selectors

CSS Attribute Selectors The Attribute selectors select elements based on an attribute or attribute value. [attribute] This selector is used ...

CSS Properties

CSS Properties There are different properties are found in latest CSS3 Properties CSS Back Ground properties Click here CSS Block ...

CSS Background Property

CSS Back Ground properties The background properties are shorthand property for html element: Background-color It is used for element background ...

CSS Background-position Property

Background-position Property Using this property set the starting position of a background image like left top left center left bottom ...

CSS Background-size property

CSS Background-size Property Using this property set image size of background image. CSS Syntax→ background-size: auto|length|cover|contain; Auto→ Default value. This ...

CSS Background-Repeat Property

CSS Background-Repeat Property The background-repeat property sets how a background image repeation. CSS Syntax→ background-repeat: repeat|repeat-x|repeat-y|no-repeat; repeat Repeat-The background image ...

CSS Background-Origin Property

CSS Background-origin property The background-orgin set the property origin position. Syntax- background-origin: padding-box|border-box|content-box; Padding-box: The background image starts from the ...

Background-clip property

CSS Background-clip property The background-clip property set the how far the background (color or image) should extend within an element ...

Background-attachment property

CSS Background-attachment Property The background-attachment property is used to sets whether a background image scrolls with the page, fixed and local ...

CSS Block Properties

CSS Block Properties There are different types of block properties are used in CSS.Word-spacingLetter-spacingVertical-alignText-alignText-indentWhite-spacedisplay Word-spacing By using the word-spacing property ...

CSS Box Model Property

CSS Box Model The box model is described about design and layout.Every design and layout are created using following property: ...

CSS Border Property

CSS Border Property The border property is a shorthand property. Using this border property we insert the border width, border ...

CSS Lists

CSS Lists The CSS list properties allow you to: unordered lists (<ul>)- the list items are marked with bullets. ordered ...

CSS Position Property

CSS Position Property Using the position property set the position of an element. These are different types like static, relative, ...

CSS Tables Property

CSS Tables Property Collapse Table Borders The border-collapse property sets the double table border into a single border. Example <!DOCTYPE> ...

CSS Menu Design Navigation Bar

CSS Menu Design Navigation Bar There are two types of CSS Menu Design Navigation Bar Vertical Navigation Bar Horizontal Navigation ...

CSS Vertical Navigation Bar

CSS Vertical Navigation Bar Vertical Navigation Menu Creation Step 1 Example <!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> ...

CSS Horizontal Navigation Bar

Horizontal Navigation Bar Horizontal Navigation Bar Creation Step1 Example <!DOCTYPE html> <html> <head> <style> ul { ...

CSS Drop-Down Menu

Drop down Menu Example <!DOCTYPE html> <html> <head> <style> ul { margin: 0; ...

CSS Sticky Navbar

Sticky Navigation Bar Example <!DOCTYPE html> <html> <head> <style> body { font-size: 28px; ...