HTML Tables

جدول‌ها در HTML (HTML Tables)

جدول‌ها برای نمایش داده‌ها به صورت ردیف و ستون استفاده می‌شوند. در HTML با تگ <table> شروع می‌کنیم و سپس ردیف‌ها و ستون‌ها را تعریف می‌کنیم.

ساختار پایه جدول:

<table border=“1”>

     <tr>

             <th>عنوان ستون 1</th>

             <th>عنوان ستون 2</th>

             <th>عنوان ستون 3</th>

      </tr>

       <tr>

               <td>ردیف 1، ستون 1</td>

               <td>ردیف 1، ستون 2</td>

               <td>ردیف 1، ستون 3</td>

      </tr>

       <tr>

              <td>ردیف 2، ستون 1</td>

              <td>ردیف 2، ستون 2</td>

              <td>ردیف 2، ستون 3</td>

      </tr>

</table>

توضیح تگ‌ها:

• <table>: شروع جدول

• <tr> (table row): تعریف یک ردیف در جدول

• <th> (table header): سلول عنوان ستون (معمولاً پررنگ و وسط‌چین)

• <td> (table data): سلول داده‌های معمولی

نتیجه:

نکته:

• ویژگی border="1" به جدول حاشیه می‌دهد. بهتر است برای ظاهر بهتر از CSS استفاده کنید.

مثال با استایل CSS ساده:

<style>

    table {

            border-collapse: collapse;

            width: 60%;

     }

        th, td {

            border: 1px solid black;

           padding: 8px;

           text-align: center;

}

       th {

          background-color: #f2f2f2;

         }

</style>

<table>

       <tr>

           <th>نام</th>

           <th>سن</th>

          <th>شهر</th>

       </tr>

       <tr>

           <td>علی</td>

           <td>30</td>

           <td>تهران</td>

        </tr>

      <tr>

          <td>سارا</td>

          <td>25</td>

          <td>مشهد</td>

       </tr>

</table>