در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش 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>

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

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

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

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

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

#آموزش_قدم_به_قدم_html #مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #آموزش_html #آمورش_html #آموزش_طراحی_وب #ساخت_صفحه_وب_توسط_جدول #ایجاد_جدول_(table) #استفاده_از_تگ_های_html #اصول_طراحی_وب_سایت
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
9 نظر
atefehh

سلام . خسته نباشید . مطالبتون عالین. من فقط یه سوالی داشتم, آیا تک details more در html5 ,تگ مشابهی در html4 داره .؟؟؟؟؟ ممنونم از پاسختون

فرهاد خانلری

سلام خواهش میکنم ممنونم

فکر میکنم تگ details more در HTMl 5 ایجاد شد.

زهرا علیخانی

سلام ممنون از آموزشتون

اگه اشتباه نکنم با توجه به آموزش تگ <table/>

باید بعد تگ<tfoot/>بسته بشه دیگه ؟؟؟

شما بعد tbody قرار دادین !

فرهاد خانلری

عنصر های thead و tfoot و tbody همگی اینها زیر مجموعه های تگ table هستند پس ما میتونیم table رو بعد از tbody هم قرار بدیم.

زهرا علیخانی

خوب تگ tfoot هم جزیی از table هست که دو تا ستون merge شدن دیگه، اگه بعد tbody تگ بسته

table رو قرار بدیم tfoot مشخصات table رو چطور تشخیص میده ؟

فرهاد خانلری

خانم علیخانی من کجای مثالم اینی که شما میگید رو نوشتم؟ پیدا نمیکنم

زهرا علیخانی

خوب در تگ tfoot شما یه سطر تعریف کردید و داخلش یک تگ td گذاشتید که colspan=2 است ،وقتی تگ table رو قبل tfoot ببندیم ........این تگ چطور تشخیص میده تعداد ستون های جدول چندتا بوده که colspan رو برابر اون عدد قرار بده ؟؟؟

نمیدونم تونستم منظورمو درست بیان کنم یا نه !!

فرهاد خانلری

اگر منظور شما تکه کد زیر هست:

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

باید بگم این فقط یه مثال و یه تکه کد هست و البته حق با شماست اینکه باید داخل تگ table قرار بگیره درسته ولی منظور من فقط یه مثال بود و نمیخواستم کل کد ها رو داخل مطلب بیارم و فقط خواستم خاصیت هر کدوم از این موارد رو به اختصار توضیح بدم. خیلی واضحه.

زهرا علیخانی

آموزش مفیدی بود

چون در آخر میخواستم به یه جمع بندی برسم و کدهارو تست کنم این سوال برام پیش اومد که محل بسته شدن تگ table باید بعد tfoot باشه ،نه بعد از tbody.(با توجه به مثال تگ tbody)

مشکل حل شد ممنون از پاسختون

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....