CSS Data Type - <display-internal>

Layout models like table and ruby consists of a complex internal structure. This chapter specifies the internal display values, which have relevance only to that particular layout model.

Possible values

The data type <display-internal> has following valid values:

table-row-group: Elements behave like <tbody> HTML elements.
table-header-group: Elements behave like <thead> HTML elements.
table-footer-group: Elements behave like <tfoot> HTML elements.
table-row: Elements behave like <tr> HTML elements.
table-cell: Elements behave like <td> HTML elements.
table-column-group: Elements behave like <colgroup> HTML elements.
table-column: Elements behave like <col> HTML elements.
table-caption: Elements behave like <caption> HTML elements.

Syntax

<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption

CSS <display-internal> - Tables

The following example demonstrates the CSS table layout display, with display values such as table-header-group, table-footer-group, table-row, table-cell:

<html>
<head>
<style> 
   main {
      display: table;
   }

   #t-row {
      display: table-row;
   }

   label,
   input {
      display: table-cell;
      margin: 5px;
   }

   #t-header-gp {
      display: table-header-group;
      text-align: center;
      background-color: aqua;
      margin-bottom: 10px;
   }

   #t-footer-gp {
      display: table-footer-group;
      background-color: peachpuff;
      margin-top: 10px;
   }
</style>
</head>
<body>
   <h1>Table Layout</h1>
   <div id="t-header-gp">Table Header</div>
   <main>
      <div id="t-row">
         <label for="name">Label1</label>
         <input type="text" id="name" name="name" />
      </div>
      <div id="t-row">
         <label for="age">Label2</label>
         <input type="text" id="age" name="age" />
      </div>
      <div id="t-row">
         <label for="age">Label3</label>
         <input type="text" id="age" name="age" />
      </div>
      </main>
      <div id="t-footer-gp">Table Footer</div>
</body>
</html>