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

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

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

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

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

: مثال

 

<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>

 

 

برای افزودن فضا داخل سلول در آموزش جدول در HTML

 

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

 

آموزش جدول در HTML ، در سلول ها می توان هرچیزی را قرار داد. برای این کار کافیست که کد مورد نظر را در تگ  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>

 

امیدواریم از این آموزش در بهترین آموزشگاه طراحی سایت لذت برده باشید.

با ما همراه باشید

 

 

 

 

مقاله
آموزش جدول در HTML
نام مقاله
آموزش جدول در HTML
خلاصه
آموزش جدول در HTML به صورت کامل و حرفه ای
نویسنده
منتشر کننده
آموزشگاه کامپیوتر پرتو
لوگو
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید ؟
در گفتگو ها شرکت کنید!

دیدگاهتان را بنویسید

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