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

و

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

آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها

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

  • bgcolor : رنگ ها در جداول

من سعی میکنم کار با رنگ ها رو بعداً بیشتر توضیح بدم ولی برای رنگ داخل سلول های جداول یک مثال جامع میزنم امیدوارم به کارتون بیاد

<body>
<table border="2" width="350">
<tr style=width:"800px">
<td align="left" bgcolor="cc.ff.33">www.</td>
<td align="center" bgcolor="#FF0066">itpro</td>
<td align="right" bgcolor="yellow">.ir</td>
</tr> 
</table>
</body>

همونطور که در کد فوق میبینید من bgcolor رو به سه صورت اومدم رنگ هاش رو مشخص کردم اولی که در ستون LEFT پیاده شده با کد هگزا نوشتم این همون RGB خودمون هست که R مخفف Red (قرمز) و G مخفف Green (سبز) و B مخفف Blue (آبی) هست و این اعداد میتونن از 00 شروع شدن تا FF که به ترتیب از کم به بیشتر این رنگ رو سوق میده.

در سلول یا ستون Center میبینید که bgcolor با یک عدد هگزادسیمال نوشته شده که این اعداد داخل کوتیشن کمتر از 0 و بیشتر از F نمیتونن باشن و این اعداد از 6 کارکتر تشکیل میشن.

در نهایت سلول right با نام یک رنگ نوشته شده که نیازی به توضیح نداره ، همونطور که در تصویر پایین هم مشاهده میکنید رنگ ها به این سه حالت میتونن پیاده سازی بشن شاید به خودتون بگید این رنگ ها رو و این اعداد رو ما نمیتونیم حفظ کنیم باید در جواب بگم سخت نگیرید نرم افزار های طراحی سایت مثلاً مثل Front Page که در حال حاظر این آموزش ها رو با اون دارم مینویسم کار ما رو راحت میکنن و خودشون کادری یا پنجره ای باز میکنن که میتونیم رنگمون رو به راحتی و با یک کلیک پیدا کنیم و پیاده سازی کنیم : تصاویر زیر رو ببینید

رنگ ها در HTML

طریقه استفاده از رنگ ها در این نرم افزار به صورت زیر است به محض اینکه شما در مقابل bgcolor علامت مساوی = را درج کنید با صفحات زیر روبرو خواهید شد.

رنگ ها در HTML

bgcolor در HTML

اگر میخواهید یک ستون کاملاً از یک رنگ ایجاد شود باید در tr از bgcolor استفاده کنید دقیقاً کاری که برای اندازه سلول انجام دادیم کد زیر را ببینید

<body>
<table border="2">
<tr bgcolor="aqua">
<td>R=Red</td>
<td>G=Green</td>
<td>B=Blue</td>
</tr>
</table>
</body>

استفاده از رنگ ها در HTML

  • cellspacing و cellpadding

cellspacing فاصله بین سلول ها را به ما نمایش میدهد و cellpadding در واقع فاصله گوشه های یک سلول تا اونجایی که text ما قرار دارد رو تعیین میکند ، در ادامه مثالی رو دنبال میکنیم.

<body>
<table border="3" bgcolor="magenta" cellspacing="10" cellpadding="15" >
<caption>
How to use Tables
</caption>
<tr bgcolor="yellow">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td align="center">x</td>
<td align="center">x</td>
<td align="center">x</td>
</tr>
<tr>
<td align="center">x</td>
<td bgcolor=#009900 align="center">x</td>
<td align="center">x</td>
</tr>
<tr>
<td align="center">x</td>
<td align="center">x</td>
<td align="center">x</td>
</tr>
</table>
</body>

استفاده از cellpadding در HTML

  • rowspan و colspan :

کاری که در نرم افزار Word انجام دادیم را به یاد آورید یک سری سلول را با هم Merge کردیم و گفتیم این کار در HTML هم امکان پذیر است و این کار با rowspan انجام میشود به این صورت کار میکند که در مقابل rowspan یک عددی قرار میگیرد که نمایانگر این است که چند تا ستون را باید با هم merge کند ، در مثالی که در ادامه برای شما خواهم نوشت در ردیف اول که th ها هستند کاری نداریم و در ردیف دوم که اولین td هست مقدار rowspan را برابر با 2 قرار میدهیم این یعنی به مقدار 2 سلول ستونی را merge کند وقتی tr بسته شد و در tr بعدی که سطر بعدی نیز میباشد ما باید تعداد ستون هایمان را یکی کم کنیم در واقع اگر tr اول 3 تا td داشت tr بعدی آن باید یکی کمتر باشد و این دقیقاً به خاطر merge کردن یک سلول از سطر دوم ماست و این موضوع در مثالی که میزنم کاملاً قانع کننده است .

برای Merge کردن یک ردیف از colspan استفاده میکنیم و دقیقاً مشابه حرف قبلی اگر از colspan استفاده کردید از تعداد td ها یکی کمتر میشود چون یکی از td ها خودش تبدیل به دو تا td شده است

<body>
<table border="2">
<tr bgcolor="yellow">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td rowspan="2">x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td bgcolor=#009900>x</td>
</tr>
<tr>
<td>x</td>
<td colspan="2">x</td>
</tr>
</table>
</body>

استفاده از merge در HTML

  • Frame:

یکی دیگر از Attribute های Table می باشد و وظیفه frame تغییراتی در حاشیه جدول است حاشیه جدول را با frame مشخص میکنیم این Frame در حالت های مختلفی آمده است که در پایین این حالت ها را با هم بررسی میکنیم و مثالی را خواهم زد.

void: اگر frame ما در این حالت باشد یعنی حاشیه های دور تا دور جدول را نخواهیم داشت.

above : اگر frame ما در این حالت باشد یعنی فقط حاشیه بالایی جدول را خواهیم داشت .

below: اگر frame ما در این حالت باشد یعنی فقط حاشیه پایینی جدول را خواهیم داشت .

lhs: اگر frame ما در این حالت باشد یعنی فقط حاشیه چپ جدول را خواهیم داشت .(مخفف Left Hand Side)

rhs: اگر frame ما در این حالت باشد یعنی فقط حاشیه چپ جدول را خواهیم داشت .(مخفف Rigth Hand Side)

vsides: اگر frame ما در این حالت باشد یعنی فقط حاشیه عمودی جدول را خواهیم داشت .(مخفف Vertical)

hsides: اگر frame ما در این حالت باشد یعنی فقط حاشیه افقی جدول را خواهیم داشت .(مخفف Horizontal)

<table frame="void" border="2">
  • rules :

در مثال بالا یعنی frame ما فقط میتوانستیم بر روی حاشیه کل جدول کار کنیم ولی اگر بخواهیم حاشیه های هر سلول را مورد تغییر قرار دهیم باید از Attribute ای به نام rules استفاده نماییم.

<body>
<table  rules="cols" border="2">
<tr bgcolor="yellow">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>
<ul>
<li>برای نمایش خط های عمودی rules="cols"</li>
<li>برای نمایش خطوط افقی  rules="rows"</li>
<li>اگرمیخواهید هیچ چیزی نمایش داده نشود rules="none"</li>
<li>برای استفاده از تیبل گروپ ها و یک حاشیه کلی از این گزینه استفاده میشود rules="groups"</li>
</ul>
</body>

استفاده از rues در HTML

ادامه دارد...

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

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

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

#مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #آمورش_html #tag_ها_در_html #merge_کردن_سلول_در_html #کار_با_جدول_در_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
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

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

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