آموزش HTML - قسمت چهارم (استفاده از css ، جداول و لیست ها)

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

سی اس اس CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

تعیین شکل نمایش عناصر HTML با CSS

سی اس اس CSS همراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.

برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:

  • برگه های استایل خارجی یا External style sheet
  • برگه های استایل داخلی یا Internal style sheet
  • استایل درون تگی یا Inline style

روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است.

(در آینده ی نزدیک مقالات آموزشی مربوط به css هم در صفحه ی بنده نوشته می شود)


استایل درون تگی - Inline Styles

قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

<p style=&quotcolor:blue;margin-left:20px;&quot>This is a paragraph.</p>

مثال: تنظیم رنگ پس زمینه عناصر HTML

خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:

<!DOCTYPE html>
<html>

<body style=&quotbackground-color:yellow;&quot>
<h2 style=&quotbackground-color:red;&quot>This is a heading</h2>
<p style=&quotbackground-color:green;&quot>This is a paragraph.</p>
</body>

</html>

خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.

مثال: تنظیم رنگ و اندازه و فونت عناصر HTML

خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:

<!DOCTYPE html>
<html>

<body>
<h1 style=&quotfont-family:verdana;&quot>A heading</h1>
<p style=&quotfont-family:arial;color:red;font-size:20px;&quot>A paragraph.</p>
</body>

</html>

خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.

مثال: ترازبندی متن

خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:

<!DOCTYPE html>
<html>

<body>
<h1 style=&quottext-align:center;&quot>Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.

برگه های استایل داخلی - Internal Style Sheet

زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style ohداخلی استفاده کرد.

در Style های داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

<head>
<style type=&quottext/css&quot>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

برگه های استایل خارجی - External Style Sheet

زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

<head>
<link rel=&quotstylesheet&quot type=&quottext/css&quot href=&quot/mystyle.css&quot />
</head>


تگ های Style در HTML

تگ <style> : برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.

تگ <link /> : هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.


تگ ها و خصوصیات منسوخ شده

در HTML4 چندین تگ و خصوصیت برای Style دهی استفاده می شود که این تگ ها در نسخه جدید HTML پشتیبانی نمی شود.

به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:

  • <font>
  • <center>
  • <strike>
  • color
  • bgcolor


جداول در HTML

جداول به وسیله تگ <table> تعریف می شوند.

یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)

عبارت td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

کد HTML بالا چگونه در یک مرورگر دیده می شود:

row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

خصوصیت Border

اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.

برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.

<table border=&quot1&quot style=&quotwidth:300px&quot>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.
برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.


با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:

<style>
table,th,td
{
border:1px solid black;
}
</style>

بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد.


تبدیل لبه های دو خطی به یک خطی

با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>


تنظیم فاصله ی محتوای سلول ها از لبه

با استفاده از خصوصیت padding درCSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.

اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.

th,td
{
padding:15px;
}


تنظیم فاصله سلول ها از یکدیگر

با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.

table
{
border-spacing:5px;
}


عنوان جدول (Header)

اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.

بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

<table style=&quotwidth:300px&quot>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>


با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:

th
{
text-align:left;
}


تگ های جدول در HTML

تگ <table> : تعریف جدول
تگ <th> : تعریف عنوان جدول (table header)
تگ <tr> : تعریف سطر جدول (table row)
تگ <td> : تعریف سلول جدول (table data)
تگ <caption> : تعریف تیتر جدول (table caption)
تگ <colgroup> : برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
تگ <col> : برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
تگ <thead> : عناوین ستون های یک جدول (header) را گروه بندی می کند
تگ <tbody> : محتویات بدنه یک جدول را گروه بندی می کند
تگ <tfoot> : محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کند


مثال بیشتر - خودتان امتحان کنید

چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم.


<!DOCTYPE html>
<html>
<body style=&quotdirection:rtl&quot>

<h4>این جدول جاشیه ندارد:</h4>
<table>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
<tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
</tr>
</table>

<h4>این جدول نیز حاشیه ندارد:</h4>
<table border=&quot0&quot>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
<tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
</tr>

</table>
</body>
</html>


نحوه ایجاد سرتیترهای جدول.

<!DOCTYPE html>
<html>
<body>

<h4>Table headers:</h4>
<table border=&quot1&quot>
<tr>
    <th>Name</th>
    <th>Telephone</th>
    <th>Telephone</th>
</tr>

<tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
</tr>

</table>

<h4>Vertical headers:</h4>
<table border=&quot1&quot>
<tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
</tr>
<tr>
    <th>Telephone:</th>
    <td>555 77 855</td>
</tr>
</table>

</body>
</html>


نحوه اضافه کردن عنوان به یک جدول.

<!DOCTYPE html>
<html>
<body style=&quotdirection:rtl&quot>

<table border=&quot1&quot>
    <caption>پس انداز ماهانه</caption>
    <tr>
        <th>ماه</th>
        <th>پس انداز</th>
    </tr>
    <tr>
        <td>شهریور</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>مرداد</td>
        <td>$50</td>
    </tr>

</table>
</body>
</html>


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

<!DOCTYPE html>
<html>
<body>

<h4>Cell that spans two columns:</h4>
<table border=&quot1&quot>
<tr>
    <th>Name</th>
    <th colspan=&quot2&quot>Telephone</th>
</tr>
<tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border=&quot1&quot>
<tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
</tr>
<tr>
    <th rowspan=&quot2&quot>Telephone:</th>
    <td>555 77 854</td>
</tr>
<tr>
    <td>555 77 855</td>
</tr>
</table>

</body>
</html>


نحوه نمایش عناصر درون عناصر دیگر.

<!DOCTYPE html>
<html>
<body>

<table border=&quot1&quot>
<tr>
    <td>
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>
    </td>
    <td>This cell contains a table:
        <table border=&quot1&quot>
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
        </tr>
        </table>
    </td>
</tr>
<tr>
    <td>This cell contains a list
        <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>pineapples</li>
        </ul>
    </td>
    <td>HELLO</td>
</tr>
</table>

</body>
</html>


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

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
}
th, td
{
padding:15px;
}
</style>
</head>
<body>

<table style=&quotwidth:300px&quot>
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
</tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>


چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border:1px solid black;
padding:5px;
}
table
{
border-spacing:15px;
}
</style>
</head>
<body>

<table style=&quotwidth:300px&quot>
<tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
</tr>
<tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
</tr>
</table>

<p>Try to change the spacing to 5px.</p>

</body>
</html>


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

The frame attribute


لیست ها در HTML

لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.

لیست های نامرتب

  • List item
  • List item
  • List item

لیست های مرتب

  1. The first list item
  2. The second list item
  3. The third list item
لیستهای نامرتب (Unorder List)

یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)

آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

نحوه نمایش کد بالا در مرورگر:

  • Coffee
  • Milk


لیست های مرتب (Order List)

یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.

آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

نحوه نمایش کد بالا در مرورگر:

  1. Coffee
  2. Milk


لیست های تعریفی (Description List)

یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.

لیست های تعریفی با تگ <dl> نوشته می شوند.

تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

نحوه نمایش کد بالا در مرورگر:

Coffee
- black hot drink

Milk
- white cold drink

نکات مهم و اساسی

نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.


مثال بیشتر - خودتان امتحان کنید

نمایش انواع دیگر لیست های ترتیبی.

Different types of ordered lists

نمایش انواع دیگر لیست های غیر ترتیبی.

Different types of unordered lists

نمایش لیست های تو در تو.

Nested list

نمایش لیست های تو در توی پیچیده تر.

Nested list 2

نمایش لیست تعریفی.

Description list

تگ های لیست در HTML

تگ <ol> : یک لیست ترتیبی تعریف می کند.

تگ <ul> : یک لیست غیر ترتیبی تعریف می کند.

تگ <li> : آیتم های یک لیست را تعریف می کند.

تگ <dl> : برای ساخت یک لیست تعریفی استفاده می شود.

تگ <dt> : برای ساخت یک آیتم در لیست تعریفی استفاده می شود.

تگ <dd> : برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.