1.7. table, border-collapse, border-spacing, caption-side, table-layout

 


<style type="text/css">
  table.table_spacing {
      border-collapse: separate;
      border-spacing: 20px 40px;
  }  
  caption {
    caption-side: top;
  }
  table.t1 {
      border-collapse: separate;
      empty-cells: hide;
  }
 
</style>

<table class="table_spacing" border="1">
    <tr>
        <td>Red</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Blue</td>
        <td>Yellow</td>
    </tr>
</table>
<br><br>

<table border="1">
    <caption>Some of Our Courses</caption>
    <tr>
        <th>Course name</th>
        <th>Lessons</th>
        <th>Quizzes</th>
    </tr>
    <tr>
        <td>C++</td>
        <td>81</td>
        <td>363</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>48</td>
        <td>144</td>
    </tr>  
</table>
<br><br>

<table class="t1" border="1">
    <tr>
        <td>HTML</td>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td></td>
    </tr>
</table>




<style type="text/css">
  table {
      border-collapse: separate;
      width: 100%;
      border: 1px solid gray;
  }
  td {
      border: 1px solid gray;
  }
  table.auto {
      table-layout: auto;
  }
  table.fixed {
      table-layout: fixed;
  }
</style>

<p>Table-layout is set to <strong>auto</strong></p>
<table class="auto">
    <tr>
        <td width="10%">500.000.000.000.000</td>
        <td width="90%">20.000</td>
    </tr>
</table>

<p>Table-layout is set to <strong>fixed</strong></p>
<table class="fixed">
    <tr>
        <td width="10%">500.000.000.000.000</td>
        <td width="90%">20.000</td>
    </tr>
</table>






























Nhận xét