✍ 📁 🙈 🙉 🙊 : css display table

<h3>display:table</h3>

<table border="1" style="width: 100%;font-size: 20px"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組  類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre><b>Example :</b>
<<?>div class="Table">
   <<?>div class="Tbody">
      <<?>div class="Tr">
         <<?>div class="td">123<<?>/div>
         <<?>div class="td">456<<?>/div>
      <<?>/div> 
      <<?>div class="Tr">
         <<?>div class="td">ABC<<?>/div>
         <<?>div class="td">DEF<<?>/div>
      <<?>/div> 
   <<?>/div>
<<?>/div>

<<?>style>
  .Table { display:table;border-style:double}
  .Tbody { display:table-row-group}
  .Tr { display:table-row}
  .td { display:table-cell;border-style:double ;
        padding:0 10px}
<<?>/style>
</pre>

</div>
</div>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

input HTML

<table border="1" style="width: 100%;"><tbody>
<tr><th>值</th><th>描述</th></tr>
<tr><td> display:table
</td><td> 顯示 表格 類似 <<c>table></td></tr>
<tr><td> display:table-row-group
</td><td> 行的分組  類似 <<c>tbody></td></tr>
<tr><td> display:table-header-group
</td><td> 表格頭組 類似 <<c>thead></td></tr>
<tr><td> display:table-footer-group
</td><td> 表格尾組 類似<<c>tfoot></td></tr>
<tr><td> display:table-row
</td><td> 表格換行 類似 <<c>tr></td></tr>
<tr><td> display:table-column-group
</td><td> 列的分組 類似 <<c>colgroup></td></tr>
<tr><td> display:table-column 
</td><td> 格列顯示 類似 <<c>col></td></tr>
<tr><td> display:table-cell
</td><td> 表格單元格 類似 <<c>td> 和 <<c>th></td></tr>
<tr><td> display:table-caption
</td><td> 表格標題 類似 <<c>caption></td></tr>
</tbody></table>

<pre><b>Example 1</b>
 <<c>div class="Table"> <<c>!-- similar <<c>table>-->
      <<c>div class="tr" >   <<c>!-- similar <<c>tr>----->
           <<c>!-- similar <<c>td> ------>
           <<c>div class="td alignCenter verticalAlignTop" >
           text-align:center;<<c>br>vertical-align:top;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignMiddle">
          text-align:center;<<c>br>vertical-align:middle;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignBottom">
          text-align:center;<<c>br>vertical-align: bottom;<<c>/div>
      <<c>/div>

<<c>div class="tr" >  <<c>!-- similar <<c>tr>-->
          <<c>!-- similar <<c>td> ------>
          <<c>div class="td alignLeft verticalAlignTop">
          text-align:left;<<c>br>vertical-align:top;<<c>/div>
 
          <<c>div class="td alignCenter verticalAlignMiddle" >
          text-align: center;<<c>br>vertical-align: middle;<<c>/div>
 
          <<c>div  class="td alignRight verticalAlignBottom " >
          text-align:right ;<<c>br>vertical-align: bottom;<<c>/div>
      <<c>/div>
<<c>/div>
<<c>style>
.Table {display:table;width: 100%;font-size: 23px;}
div    {border: 1px solid #f00;}
.tr    {display:table-row;height: 200px; }
.td    {display:table-cell;width:33%;}
.alignCenter  {text-align:center;}
.alignLeft    {text-align:left;}
.alignRight   {text-align:right;}

.verticalAlignTop    {vertical-align:top;}
.verticalAlignMiddle {vertical-align:middle;}
.verticalAlignBottom {vertical-align:bottom;}
<<c>/style>

</pre>
<style> 
td {padding-left:10px}

Edit

#ccs #HTML #blogger #字型樣式 #Font style

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單