CSS Table

For better look and feel you can apply styles on HTML tables. It provides you sequences of data in table format. An html table is defined with the <table> tag.

The table contains rows and each table row is defined with the <tr> tag. A <th> tag is defined table header. The table headings are bold and centered, by default. A <td> tag is defined the table data/cell.

There are some properties for defining a table:

border
border-collapse
padding
width
height
text-align
color
background-color

CSS table border

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>To add border use the CSS table border property</p>
<table style="width:100%">
  <tr>
    <th>S.NO</th>
    <th>Name</th> 
    <th>Class</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
    <td>First</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>Second</td>
  </tr>
  <tr>
    <td>3</td>
    <td>C</td>
    <td>Third</td>
  </tr>
</table>
</body>
</html>

Output:

Bordered Table

To add border use the CSS table border property

S.NO	Name	Class
1	A	First
2	B	Second
3	C	Third

CSS table border collapse

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2>CSS Table border Collapse </h2>
<p>To add border use the CSS table border collapse property</p>
<table style="width:100%">
  <tr>
    <th>S.NO</th>
    <th>Name</th> 
    <th>Class</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
    <td>First</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>Second</td>
  </tr>
  <tr>
    <td>3</td>
    <td>C</td>
    <td>Third</td>
  </tr>
</table>
</body>
</html>

Output:

CSS Table border Collapse

To add border use the CSS table border collapse property

S.NO	Name	Class
1	A	First
2	B	Second
3	C	Third

CSS padding property

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>
<h2>Table padding</h2>
<p>To add padding use the CSS table padding property</p>
<table style="width:100%">
  <tr>
    <th>S.NO</th>
    <th>Name</th> 
    <th>Class</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
    <td>First</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>Second</td>
  </tr>
  <tr>
    <td>3</td>
    <td>C</td>
    <td>Third</td>
  </tr>
</table>
</body>
</html>

Output:

table-padding

CSS border spacing

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border spacing</h2>
<p>To add space use the CSS border spacing property</p>
<table style="width:100%">
  <tr>
    <th>S.NO</th>
    <th>Name</th> 
    <th>Class</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
    <td>First</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>Second</td>
  </tr>
  <tr>
    <td>3</td>
    <td>C</td>
    <td>Third</td>
  </tr>
</table>
</body>
</html>

Output:

table-spacing

« Previous

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads