آموزشآموزش HTML – بخش هفتم آموزش HTML – بخش هفتم– بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

آموزش HTML – بخش هفتم

طراحی جدول با زبان HTML

در این بخش از آموزش گام‌به‌گام طراحی سایت به آموزش طراحی جدول با تعداد سطر و ستون دلخواه می‌پردازیم و همچنین یاد می‌گیریم که چگونه به جدولمان تغییرات و style های دلخواه اعمال کنیم.

با استفاده از تگ <table> جدولی را به سندمان اضافه می‌کنیم. درون این تگ برای ایجاد تعداد سطر دلخواه از تگ <tr> استفاده می‌کنیم. هر ردیف یا ستون دارای عنوان است. عناوین را با تگ <th> مشخص می‌کنیم که متن درون این سلول‌های عناوین به‌صورت بلد شده نمایش داده می‌شوند و به‌صورت دیفالت در وسط سلول قرار می‌گیرند. داده‌های سلول‌ها را با استفاده از تگ <td> مشخص می‌کنیم. تگ‌های <th> و <td> درون تگ <tr> قرار می‌گیرند.

نکته: درون سلول‌های <td> می‌توان متن، عکس، لیست و در کل هر المنتی از سند HTML را قرارداد.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

                                      <table>

                                                <tr>

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

                                                          <th> عناوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

                                                <br> <br> <br> <hr>

                             <p> در جدول زیرستون اول عناوین ردیف‌ها هستند </p>

                                      <table>

                                                <tr>

                                                          <th> عنوان ردیف اول </th>

                                                          <td> داده ردیف اول </td>

                                                          <td> داده ردیف اول </td>

                                                          <td> داده ردیف اول </td>

                                                </tr>

                                                <tr>

                                                          <th> عنوان ردیف دوم </th>

                                                          <td> داده ردیف دوم </td>

                                                          <td> داده ردیف دوم </td>

                                                          <td> داده ردیف دوم </td>

                                                </tr>

                                                <tr>

                                                          <th> عنوان ردیف سوم </th>

                                                          <td> داده ردیف سوم </td>

                                                          <td> داده ردیف سوم </td>

                                                          <td> داده ردیف سوم </td>

                                                </tr>

                                                <tr>

                                                          <th> عنوان ردیف چهارم </th>

                                                          <td> داده ردیف چهارم </td>

                                                          <td> داده ردیف چهارم </td>

                                                          <td> داده ردیف چهارم </td>

                                                </tr>

                                      </table>

 

 

 

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

در مثال بالا و در جدول اول، ردیف اول را عنوان قراردادیم و در جدول دوم، ستون اول را عنوان برای ردیف‌ها قراردادیم.

افزودن حاشیه به سلول‌ها

در مثال بالا دیدیم که بین سلول‌ها هیچ حاشیه‌ای وجود نداشت و سلول‌ها مانند جداول در word و یا اکسل، مجزا نیستند. برای افزودن حاشیه باید از CSS استفاده کنیم. به‌این‌ترتیب که در تگ <head> تگ <style> را ایجاد می‌کنیم. حال باید المنت‌ها را انتخاب کنیم. دیدیم که برای جدول سه تگ داریم که هرکدام از این تگ‌ها یک جزء هستند. اگر تنها تگ <table> را انتخاب کنیم یک حاشیه اطراف کل جدول ایجاد می‌کنیم و سلول‌ها همچنان بدون حاشیه باقی می‌مانند. بدین ترتیب هر جزء را که انتخاب کنیم، اطراف آن جزء حاشیه ایجاد می‌شود.

یادآوری: قبلا دیدیم که برای ایجاد حاشیه از پراپرتی border استفاده می‌کنیم.  همچنین وقتی می‌خواهیم چند المنت را انتخاب کنیم باید سلکتورها را از هم جدا کنیم. برای جدا کردن سلکتورها بین آن‌ها علامت ” , ” را قرار می‌دهیم.

 <!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 2px solid blue;

                                                  }

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

                                      <table>

                                                <tr>

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

                                                          <th> عناوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                         <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

Collapsed borders

در مثال بالا دیدیم که حاشیه‌ای که به سلول‌ها دادیم، دارای فاصله‌ای کوچک بین حاشیه هر سلول با سلول‌های دیگر است. می‌توانیم با استفاده از پراپرتی  border-collapse و دادن مقدار collapse به آن، این فاصله را از بین برد و حاشیه سلول‌ها را به یک خط تغییر داد.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 2px solid blue;

                                                          border-collapse: collapse;

                                                  }

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

                                      <table>

                                                <tr>

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

                                                          <th> عناوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

افزودن padding به سلول‌ها

قبلا با border و padding و margin آشنا شدیم. برای اعمال padding به تگ‌های <th> و <td> ابتدا این تگ‌ها را به روش گفته‌شده انتخاب می‌کنیم و بعد پراپرتی padding را اعمال می‌کنیم و مقدار دلخواه را با واحد px به آن می‌دهیم.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 2px solid blue;

                                                          border-collapse: collapse;

                                                         padding: 15px;

                                                            }

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

                                      <table>

                                                <tr>

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

                                                          <th> عناوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

تراز کردن متن‌های سلول‌ها

با استفاده از پراپرتی text-align می‌توان متن‌های سلول‌ها را در سمت چپ، وسط و یا در سمت راست سلول قرارداد. توجه کنید که برای اعمال پراپرتی text-align به عناوین جداول، باید عرضی را برای جدول در تگ <table> تعیین کنید.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 5px solid blue;

                                                          border-collapse: collapse;

 

                                                                               }

                                                          td , th { padding: 50px; }

 

                                                                    th {

                                                                             text-align: right;

                                                                              }

                                                                    td {

                                                                             text-align: left;

                                                                              }

 

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

                             <!-- set a fix width for the table -->

                                      <table style="width: 100%;">

                                                <tr>

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

                                                          <th> عنوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

افزودن فاصله به خانه‌های جدول

در مثال دوم دیدیم که در حالت عادی بین خانه‌های جدول فاصله‌ای قرار دارد. می‌توانیم این فاصله را با استفاده از پراپرتی border-spacing به‌دلخواه تغییر داد. مقدار این پراپرتی را باید با پیکسل بیان کرد. توجه کنید که برای اعمال border-spacing باید border-collapse را حذف کنید. در غیر این صورت نمی‌توان بین خانه‌ها فاصله ایجاد کرد.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 1px solid blue;

                                                          padding: 5px;                                                       

                                                                               }

 

                                      table {

                                                           border-spacing: 15px;

                                                  }

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

 

                                      <table>

                                                <tr>

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

                                                          <th> عنوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

می‌توانید border-spacing را به <td> و <th> هم اعمال کنید. ( این کار را انجام داده و نتیجه را مشاهده کنید. )

ادغام کردن چند خانه از جدول

همان‌طور که در نرم‌افزار word و excel  می‌توانیم خانه‌ها را در هم ادغام کنیم، در زبان HTML می‌توان خانه‌های یک ردیف از جدول را با استفاده از اتریبیوت colspan در هم ادغام کرد.

فرض کنید که جدول ما ۴ ستون و ۴ ردیف دارد و می‌خواهیم در ردیف اول، خانه‌های دوم و سوم و چهارم را در هم ادغام کنیم. برای این کار باید در اولین تگ <tr>  تگ‌های سوم و چهارم <th> را حذف کرده و در دومین تگ <th> اتریبیوت colspan را بنویسیم و مقدار آن را ۳ بدهیم تا ۳ خانه را در هم ادغام کند. اگر بخواهیم دو خانه را ادغام کنیم، باید مقدار اتریبیوت را ۲ بدهیم و به همین ترتیب می‌توان تعداد خانه‌های دلخواه هر ردیف را در هم ادغام کرد. ( به‌عنوان تمرین، تگ‌های <th> که ادغام کردیم را حذف نکنید یعنی در اولین تگ <tr> همان ۴ تگ <th> وجود داشته باشد و مقدار colspan را همان ۳ بدهید و نتیجه را مشاهده کنید. )

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 1px solid blue;

                                                          padding: 5px;                                                       

                                                                               }

 

                                      table {

                                                           border-spacing: 15px;

                                                  }

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

 

                                      <table>

                                                <tr>

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

                                                          <th colspan="3"> سه خانه از این ردیف در هم ادغام‌شده‌اند </th>

                                                          <!-- اگر تگ‌های اضافه را حذف نکنید، دوخانه اضافه به وجود می‌آید که در زیر آن‌ها خانه‌ای وجود نخواهد داشت. -->

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

برای ادغام کردن خانه‌های یک ستون از اتریبیوت rowspan استفاده می‌کنیم.

فرض کنید که یک جدول ۴*۴  داریم و می‌خواهیم خانه‌های دوم و سوم از ستون اول را در هم ادغام کنیم. برای این کار باید در ردیف دوم و در اولین خانه ( یعنی اولین <th> ) اتریبیوت rowspan را نوشته و مقدار آن را تعداد خانه‌هایی که می‌خواهیم ادغام کنیم بدهیم. مثلا اگر بخواهیم دوخانه را در هم ادغام کنیم مقدار آن را ۲ می‌دهیم. بعدازاین کار باید خانه‌ی سوم از ستون اول ( یعنی اولین <th> در سومین <tr> ) را از بین ببریم. چون این خانه قرار است در خانه دوم ادغام شود. ( برای تمرین این خانه را از بین نبرید و نتیجه را مشاهده کنید. ) اگر بخواهیم ۳ خانه از ستون اول را در هم ادغام کنیم باید اولین <th> در ردیف چهارم را هم از بین ببریم و مقدار rowspan را ۳ بدهیم.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title> عنوان صفحه </title>

<style>

table , td , th  {

border: 1px solid blue;

border-collapse: collapse;

}

td , th {

padding: 15px;

 

}

 

</style>

</head>

<body>

<p> در جدول زیرستون اول عناوین ردیف‌ها هستند </p>

<table>

<tr>

<th> عنوان ردیف اول </th>

<td> داده ردیف اول </td>

<td> داده ردیف اول </td>

<td> داده ردیف اول </td>

</tr>

<tr>

<th rowspan="2"> عنوان ردیف دوم </th>

<td> داده ردیف دوم </td>

<td> داده ردیف دوم </td>

<td> داده ردیف دوم </td>

</tr>

<tr>

<!-- <th> عنوان ردیف سوم </th> -->

<td> داده ردیف سوم </td>

<td> داده ردیف سوم </td>

<td> داده ردیف سوم </td>

</tr>

<tr>

<th> عنوان ردیف چهارم </th>

<td> داده ردیف چهارم </td>

<td> داده ردیف چهارم </td>

<td> داده ردیف چهارم </td>

</tr>

</table>

 

 

</body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

توجه داشته باشید که برای ادغام کردن خانه‌های هر ردیف از colspan و برای ادغام کردن خانه‌های هر ستون از rowspan استفاده می‌کنیم. همچنین دقت کنید که هرکدام از این اتریبیوت ها را در هر خانه‌ای بنویسیم، شمارش از آن خانه شروع می‌شود. مثلا در یک ستون ۴ خانه‌ای rowspan را در خانه دوم می‌نویسیم و مقدار آن را ۳ می‌دهیم، در ستون اول از خانه دوم شمارش شروع‌شده و خانه‌های دوم و سوم و چهارم ( تعداد ۳ خانه ) در هم ادغام می‌شوند. همچنین خانه‌هایی که قرار است ادغام شوند، باید حذف شوند. اگر می‌خواهیم در یک ردیف ( مثلا ردیف اول ) خانه‌هایی را ادغام کنیم باید فقط در اولین تگ <tr> خانه‌های ادغامی را حذف کنیم و اگر می‌خواهیم خانه‌های یک ستون ( مثلا ستون اول ) را ادغام کنیم، باید اولین تگ از هر تگ <tr> را حذف کرد. برای درک بیشتر این نکات، خانه‌ای مختلفی از سطرها و ستون‌ها را در هم ادغام کنید و نتیجه را مشاهده کنید. با حل چند مثال این نکات را به‌خوبی درک خواهید کرد.

اضافه کردن عنوانی برای جدول

برای اضافه کردن عنوان برای جدول، عنوان دلخواه را در تگ <caption> می‌نویسیم. این تگ را بلافاصله بعد از تگ <table> می‌نویسیم.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 1px solid blue;

                                                          border-collapse: collapse;

                                                               }

                                                    td , th {

                                                          padding: 15px;

 

                                                                    }

 

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

 

                                      <table>

                                        <caption> عنوان جدول </caption>

                                                <tr>

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

                                                          <th> عنوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

تعیین style دلخواه برای یک جدول

اگر چندین جدول در صفحه وجود داشته باشد، برای اعمال style باید برای جدول موردنظر id را تعریف کنیم و بعد style های دلخواه را اعمال می‌کنیم.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                             <style>

                                      table , td , th  {

                                                          border: 1px solid blue;

                                                          border-collapse: collapse;

                                                               }

                                                    td , th {

                                                          padding: 15px;

 

                                                                    }

                                      table#t02 {

                                                                   width: 90%;

                                                                   background-color: #d3f5a1;

                                                                    }

 

                             </style>

                   </head>

                   <body>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

 

                                      <table>

                                        <caption> جدول ۱ </caption>

                                                <tr>

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

                                                          <th> عنوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

                                      <br> <hr>

                             <p> در جدول زیر ردیف اول عناوین ستون‌ها هستند </p>

 

                                      <table id="t02">

                                        <caption> جدول ۲ </caption>

                                                <tr>

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

                                                          <th> عنوان ستون دوم </th>

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

                                                          <th> عنوان ستون چهارم </th>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                                <tr>

                                                          <td> داده ستون اول </td>

                                                          <td> داده ستون دوم </td>

                                                          <td> داده ستون سوم </td>

                                                          <td> داده ستون چهارم </td>

                                                </tr>

                                      </table>

 

                   </body>

</html>

آموزش HTML – بخش هفتم | آموزش HTML 5 | آموزش طراحی سایت |

[rating itemreviewed=”در این مطلب آموزش HTML” rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”14/11/2016″ best=”10″ worst=”0″]در این مطلب آموزش HTML – بخش هفتم را برررسی میکنیم و آموزش طراحی سایت شما می توانید با آموزش HTML 5 و آموزش طراحی وب سایت برای خود وب سایت ایجاد کنید و[/rating]

برای پرسش سوالات خود و کسب اطلاعات بیشتر در مورد طراحی سایت ، سئو ، طراحی نرم افزار موبایل و آشنایی با فرآیند انجام کار با مشاوران گروه سایت سازان در ارتباط باشید.

دسته بندی طراحی سایت در سایت سازان