الجداول

محتويات الدرس

الكود المستخدم فى الدرس

الجزء الاول 

				
					<!DOCTYPE html>
<html>
  <style>
    table,
    th,
    td {
      border: 1px solid orange;
      border-collapse: collapse;
    }
  </style>
  <body>
    <!--
        tr : table row
        th : table head 
        td : table data
    -->
    <table>
      <tr>
        <th>--Month--</th>
        <th>--Savings--</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
    
    
  </body>
</html>

الجزء التاني

				
					
<!DOCTYPE html>
<html>
  <style>
    table,
    th,
    td {
      border: solid orange 1px;
      border-collapse: collapse;
    }
  </style>
  <body>
    <!--
        tr : table row
        th : table head 
        td : table data
    -->
    <table>
        
      <thead>
        <tr>
          <th>--Month--</th>
          <th>--Savings--</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>faburary</td>
          <td>$100</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>Sum</td>
          <td>200$</td>
        </tr>
      </tfoot>
      
    </table>
  </body>
</html>

تقدر تشوف الفيديو

من هنا