caption-side

Property Variable Name

caption-side

Available Values for caption-side

top|bottom|initial|inherit

Example using caption-side top

Here is an example using caption-side:top;

Code

<style>
/* Some Styles so we can see the element */
.demo-table-1 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  /*display: flex;
  flex-wrap: wrap;*/
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:3px solid #000;
  border-collapse: separate;
}
.demo-table-1 td {
  padding:3px;
  border:3px solid #111;
}
.demo-table-1 caption {
  /* this is the test property */
  caption-side:top;
}

</style>
<h2>Example using caption-side top</h2>
<p>Here is an example using <code>caption-side:top;</code></p>
<table class='demo-table-1'>
<caption>This is a caption explaining what data is in <em>demo-table-1</em></caption>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</tbody>
</table >

Example using caption-side bottom

Here is an example using caption-side:bottom;

Code

<style>
/* Some Styles so we can see the element */
.demo-table-2 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  /*display: flex;
  flex-wrap: wrap;*/
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:3px solid #000;
  border-collapse: separate;
}
.demo-table-2 td {
  padding:3px;
  border:3px solid #111;
}
.demo-table-2 caption {
  /* this is the test property */
  caption-side:bottom;
}

</style>
<h2>Example using caption-side bottom</h2>
<p>Here is an example using <code>caption-side:bottom;</code></p>
<table class='demo-table-2'>
<caption>This is a caption explaining what data is in <em>demo-table-2</em></caption>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</tbody>
</table >

Example using caption-side initial

Here is an example using caption-side:initial;

Code

<style>
/* Some Styles so we can see the element */
.demo-table-3 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  /*display: flex;
  flex-wrap: wrap;*/
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:3px solid #000;
  border-collapse: separate;
}
.demo-table-3 td {
  padding:3px;
  border:3px solid #111;
}
.demo-table-3 caption {
  /* this is the test property */
  caption-side:initial;
}

</style>
<h2>Example using caption-side initial</h2>
<p>Here is an example using <code>caption-side:initial;</code></p>
<table class='demo-table-3'>
<caption>This is a caption explaining what data is in <em>demo-table-3</em></caption>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</tbody>
</table >

Example using caption-side inherit

Here is an example using caption-side:inherit;

Code

<style>
/* Some Styles so we can see the element */
.demo-table-4 {
  background:#999;
  margin-bottom:10px;
  height:220px;
  width:100%;
  /*display: flex;
  flex-wrap: wrap;*/
  color:#FFF;
  align-items: center;
  justify-content: center;
  border:3px solid #000;
  border-collapse: separate;
}
.demo-table-4 td {
  padding:3px;
  border:3px solid #111;
}
.demo-table-4 caption {
  /* this is the test property */
  caption-side:inherit;
}

</style>
<h2>Example using caption-side inherit</h2>
<p>Here is an example using <code>caption-side:inherit;</code></p>
<table class='demo-table-4'>
<caption>This is a caption explaining what data is in <em>demo-table-4</em></caption>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</tbody>
</table >