آموزش جداول در HTML

آموزش جداول در HTML

  • آموزش جداول  در HTML

  • آموزش تگ table در HTML

  • آموزش صفت border در تگ table

  • آموزش صفت tr در تگ table

  • آموزش صفت td در تگ tr

  • آموزش صفت تگ th در تگ table

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

این تگ دارای قسمت ابتدایی و انتهایی است و محتویات جدول بین این دو تگ قرار می گیرد. تگ دیگری که در جداول و برای افزودن محتویات به آنها استفاده می شود، تگ td (table data) است.

این تگ نیز شامل دو قسمت می باشد. محتویات مورد نظر هر سلول باید در این تگ نوشته شود. برای اینکه بتوانیم جدول چند سطری داشته باشیم باید از تگ دیگری به نام tr استفاده کنیم. این تگ نیز دو قسمتی است.

: مثال

 

<body>
اندازه حاشیه دور جدول را مشخص می کند
<table border=”2”>
ایجاد سطر اول
<tr>
سلول های سطر اول
<td> this is a test </td>
<td> this is a test </td>
</tr>
ایجاد سطر دوم
<tr>
سلول های سطر دوم
<td> this is a test </td>
<td> this is a test </td>
</tr> </table> </body>

 

 

برای افزودن فضا داخل سلول

 

        <table border=”  “ cellspacing=”  ”>
<table border=”  “  cellpadding=”  “>

 

در سلول ها می توان هرچیزی را قرار داد. برای این کار کافیست که کد مورد نظر را در تگ  td وارد کنیم.

مثال:


                                                                                                                                                                                              <body>
<table border=”2”>
<td> <a href=”  “>  salam </a> </td>
<td> <img src=”نام عکس “ height=”150” width=”150”> </td>
</table> </body>
<table width=” “ >
<table height=” “>
<td align=” “>
<td valign=” “>
<td rowspan=” “>
<td colspan=” “>

 

مثال:



<body>
<table border=”2”>
<tr> <td align=”center”> سلام  </td>
<td align=”center” roespan=”2”>
<img src=”نام یک عکس “ width=”150” height=”150”> </td>
</tr>
<td align=”center”> سلام </td>
</tr> </table>

<table bgcolor=” “>

 

اگر بخواهیم رنگ هر سلول به صورت جداگانه تغییر کند، این شناسه را برای هر سلول به صورت مستقل به کار می بریم ( و یا در شناسه tr برای تغییر رنگ هر سطر)

مثال:


<body>
<table>
<tr>
<td bgcolor=”pink”> This is a test </td>
<td> This is a test </td>
</tr>
<tr>
<td> This is a test </td>
<td bgcolor=”pink”> This is a test </td>
</tr> </table> </body>

 

 

ایجاد سرتیتر برای جدول

 

برای این کار از  تگ< th>  استفاده می کنیم. این تگ نیزر دارای دو قسمت می باشد و نحوه استفاده از آن به این صورت است که به جای استفاده از تگ <td> برای سلول های سرتیتر از این تگ  استفاده می شود.

مثال:



<body>
<table border=”2” bgcolor=”red”>
<tr>
<th> column1  </th>
<th> column2  </th>
<th> column3  </th>
</tr>
<tr>
<td> This is a test </td>
<td> This is a test </td>
<td> This is a test </td>
</tr>
</table> </body>

 

برای مشاهده سلول های خالی در جدول، با استفاده از کاراکتری خاص یک Space می زنیم به صورتی که در صفحه سلول را نمایش دهد ولی درونش خالی باشد.

<td> &nbsp </td>

 

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

این کار با استفاده از تگ caption انجام می شود. این تگ شامل 2 قسمت است و عبارتی که برای عنوان جدول انتخاب می کنیم، بین دو قسمت آغازی و پایانی قرار می گیرد.

برای این کار تگ caption را بعد از تگ table و قبل از اولین تگ tr می نویسیم:

مثال:

 


<table>
<caption> my caption </caption>
<tr>
<td> This is a test </td>
</tr>
</table>

 

 

دانلود “فایل pdf آموزش جداول در HTML” %D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D8%AF%D8%A7%D9%88%D9%84-%D8%AF%D8%B1-HTML.pdf – Downloaded 31 times –

 

 

0 پاسخ ها

سوال خود را مطرح نمایید

در صورت تمایل در بحث شرکت کنید
در صورت تمایل از راهنمایی رایگان ما استفاده کنید!!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *