CSS Table

Next ❯CSS Layout

Used to style the table appearance

  • turned_in_notTable Properties
    • table-layout
    • caption-side
    • empty-cells
    • border-collapse
    • border-spacing
Table Caption
NameClassScore
Abc Def Ghi Jkl Mno Pqr10th89%
BCD10th95%
CDE92%

Try the properties option to learn more about it

table {
  table-layout:auto;  /*Default*/
  caption-side:top;   /*Default*/
  border-collapse:separate; /*Default*/
  border-spacing: 0px 0px; /*Default*/
  empty-cells:show;   /*Default*/
  background:pink;
  border:2px solid red;
}
th,td{
  border:2px solid black;
}
Tablesubject
Tableclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
table {
  table-layout:auto;
  caption-side:top;
  border-collapse:separate;
  border-spacing: 0px 0px;
  empty-cells:show;
  background:pink;
  border:2px solid red;
}
th,td{
  border:2px solid black;
}
</style>
</head>
<body>
  <table>
  <thead>
    <caption>Table Caption</caption>
    <tr>
      <th>Name</th>
      <th>Class</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Abc Def Kef FDSS SS samdl</td>
      <td>10th</td>
      <td>89%</td>
    </tr>
    <tr>
      <td>BCD</td>
      <td>10th</td>
      <td>95%</td>
    </tr>
    <tr>
      <td>CDE</td>
      <td></td>
      <td>92%</td>
    </tr>
  </tbody>
  </table>
</body>
</html>
  • label_outlineTryout more
    PropertiesValues
    table-layout:
    caption-side:
    border-collapse:
    border-spacing:
    empty-cells:

  • CSS Layout
❮ Prev CSS List
Next ❯CSS Layout
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯