تا %60 تخفیف خرید برای 6 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک

سلام و عرض ادب دارم خدمت دوستان و همراهان itpro بحث HTML رو با جداول ادامه میدم ، همونطور که قبلاً هم گفتم جدول ها در صفحات وب بسیار پر کاربرد هستند و یکی از اصلی ترین موارد مورد استفاده از جدول ها این است که شما بیایید و ساختار یک صفحه رو به نمایش بگذارید در این مطلب من صفحه وبی را خواهم ساخت که کلاً از جدول ایجاد شده یعنی در واقع از یک جدولی استفاده میکنم که ساختار اصلی یک صفحه رو نمایش میده و همونطور که در کد پایین خواهد دید ابعاد و اندازه های این جدول رو توسط درصد (%) مشخص کردم بدین ترتیب وقتی کاربرها با رزولوشن های مختلف اقدام به بازدید سایت شما میکنند صفحه وب شما از نظر اندازه ها به یک میزان تغییر میکنند و این از فنی بسیار مناسب خواهد بود.

اما قبل از ارسال یاد آوری میکنم در مورد تگ های ایجاد جدول ،توسط تکه کد زیر شما میتوانید در سایت یک جدول ایجاد کنید

<table>
...محتویات جدول...
</table>

سپس برای اضافه کردن و افزودن محتویات به جدول از تگ <td> که قبلاً مورد بحث قرار گرفته استفاده میکنیم ، که td مخفف کلمه table data است ، برای جدول هم از border استفاده میکنیم که حاشیه ها را برای ما ایجاد کند ، تکه کد زیر نیز جدولی ساده با border که دو سلول دارد را مشخص میکند

<table border="3">
<td>
سلول اول
</td>
<td>
سلول دوم
</td>
</table>

اگر میخواهید به خط بعدی یا ردیف بعدی بروید باید توسط تگ tr این کار را انجام دهیم ، یادتان باشد که در انتها باید تگ ها بسته شوند و کد زیر دقیقاً یک جدولی با دو ستون و دو ردیف را برای ما ایجاد میکند.ضمناً شما می توانید هر چیزی را در داخل سلول ها ایجاد کنید مانند تصویر ، لینک، پاراگراف یک متن یا ... و برای این منظور فقط کافی است متن یا کد لینک یا تصویر را داخل و بین تگ <td> و <td/> وارد کنید.

<table border="3">
<tr>
<td>
سطر اول و سلول اول
</td>
<td>
سطر اول و سلول دوم
</td>
</tr>
<tr>
<td>
سطر دوم و سلول اول
</td>
<td>
سطر دوم و سلول دوم
</td>
</tr>
</table>

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

<table width ="100%" border ="1" cellpadding="0" cellspacing ="0">
<colgroup>
<col width="15%"/>
<col width="85%"/>
</colgroup>

در کد فوق جدول ما با table آغاز میشه و همونطور که میبینید تمام ستون های جدول با درصد کار میکنن برای همین با هر مرورگری و هر درصد رزولوشنی این درصد ها متغیر میشن و شما به درستی میتونید صفحه رو ببینید Border جدول رو عدد 1 دادم همچنین از cellpadding و cellspacing که در بخش هفتم در مورد این دو توضیح دادم استفاده نکردم

تگ &lt;colgroup&gt;


همونطور که میدونید و در بخش های اول و دوم هم گفتم HTML تگ های زیادی دارد و به علت کثرت بالای این تگ ها در هر درس نسبت به آموزشمون تگی جدید رو باید به تگ هایی که قبلاً یاد گرفتیم اضافه کنیم تگ colgroup گروهی از یک یا چند ستون در یک جدول را جهت قالب بندی مشخص می کند ، همچنین از این تگ برای سبک یا style دادن به کل ستون،استفاده می شود.

  • نکته 1: این تگ باید در پایین تگ table باشد وحتماً قبل از thead ، tbody ، tfoot و tr قرار گیرد.
  • نکته 2: برای تعریف خصوصیت های مختلف به یک ستون در colgroup از عنصر <col> در داخل آن تگ استفاده میشود.

خصوصیات تگ colgroup:


در مورد خوصوصیات تگ colgroup تصویر زیر کاملاً گویا هست.

قدم به قدم با آموزش HTML

خب بر میگردیم به ادامه آموزشمون پس از تگ colgroup ما میخواهیم از عنصر های thead و tfoot و tbody استفاده کنیم که همگی اینها زیر مجموعه های تگ table هستند و جهت ایجاد بخش های مختلف جدول و همچنین خوانایی بهتر این جداول از این عناصر استفاده میشود ، کد زیر را ببینید

<thead>
<tr>
<td align="center" colspan="2">
<img src= "baner.jpg" height="100%" width="100%" alt="how to do "/></td>
</tr>
</thead>

خب با توجه به اینکه ما میخواهیم از جدولی استفاده کنیم که دو خونه ای هست پس colspan رو برابر 2 قرار میدهیم و ضمناً در بالای صفحه یک تصویر رو به عنوان Header قرار دادم که در کد فوق با آدرس baner.jpg مشخص شده هست.

در table row بعدی دو سلول یا دو خونه وجود داره خونه سمت چپ لینک ها معرفی شدن که همگی انجمن های سایت itpro هستند البته این یک منو بسیار ساده هست هر چند میتونید متو هاتون رو با Java script ایجاد کنید تا منوهاتون زیبا و پیشرفته باشه و قسمت سمت راست رو میتونید اخبار یا هر متنی رو در صفحه قرار بدید.

<tfoot>
<tr>
<td style ="font-family:arial;fontsize:.75em;" align="center" colspan="2">web Design by itpro &#169; copyright 2015.</td>
</tr>
</tfoot>

در کد بالا که سلول آخر هم هست و توسط tfoot ایجاد کردیم بهش میگن Footer که معمولاً راجع به copyrighth و ایجاد کننده صفحه صحبت میشه همونطور که در کد بالا مشاهده میشه از علامت یا کد &#169 استفاده کردیم برای نمایش کارکتر های خاص که در بخش قبلی در موردش صحبت کردیم.

کد زیر هم table body هست که دارای دو td هست یکی برای درج لینک ها و دیگری برای درج متن یا تصاویری که به دلخواه میتوان در داخل سایت قرار داد

<tbody>
<tr>
<td bgcolor = "#FF9933" align="left">
<ul>
<li><a href="http://web.tosinso.com">web</a></li>
<li><a href="http://dba.tosinso.com">dba</a></li>
<li><a href="http://network.tosinso.com">network</a></li>
<li><a href="http://gsm.tosinso.com">gsm</a></li>
<li><a href="http://linux.tosinso.com">linux</a></li>
<li><a href="http://security.tosinso.com">security</a></li>
<li><a href="http://hardware.tosinso.com">hardware</a></li>
<li><a href="http://icdl.tosinso.com">icdl</a></li>
<li><a href="http://programing.tosinso.com">programing</a></li>
<li><a href="http://graphic.tosinso.com">graphic</a></li>
<li><a href="http://virtualization.tosinso.com">virtualization</a></li>
</ul>
</td>
<td>
<p style="font-size: 2em"><center><b>insert images and text...</b></center></p>
</td>
</tr>
</tbody>
</table>

در نهایت در تصویر زیر با هم ماحصل کد زیر رو مشاهده خواهیم نمود:

ایجاد یک جدول برای صفحه وب

نویسنده : فرهاد خانلری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

نظر شما
برای ارسال نظر باید وارد شوید.
9 نظر
افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند