جداول

جداول

جدول ها توسط تگ <table> ایجاد میشوند. هر سطر جدول با تگ <tr>  و هر ستون توسط تگ <td> ایجاد میشود. مثال زیر یک نمونه ایجاد جدول ساده میباشد با ویژگی border  که با ۱ مقدار دهی و باعث ایجاد حاشیه میشود.

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

 

 <html>
 <head>
 <title> Creating a Table</title>
 </head> 
 <body>
<table border="1">
 <tr>
 <th>Firstname</th>
 <th>Lastname</th> 
 <th>Age</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td> 
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td> 
 <td>94</td>
 </tr>
</table>
 </body>
</html>

Capt';ure

نکته
 تگ td یا همان ستونها ی جدول مانند ظرفی که حاوی اطلاعات است میباشند. این اطلاعات میتواند شامل همه عناصر html مثل متن، عکس، لیست و…. باشد

ویژگی colspan وrowspan

 

از colspan برای ادغام  دو یا چند ستون استفاده میشود.

از rowspan برای ادغام  دو یا چند ردیف استفاده میشود.

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td >Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td colspan="2"><br /></td>
 </tr>
</table>
 </body>
</html>

Colspan

Unktitled

 <html>
 <head>
 <title> Colspan Attribute</title>
 </head> 
 <body>
<table border="2">
 <tr>
 <td rowspan="2">Red</td>
 <td>Blue</td>
 <td>Green</td>
 </tr>
 <tr>
 <td><br /></td>
 <td ><br /></td>
 </tr>
</table>
 </body>
</html>

rowspan

 

Unktitled

لیست های HTML

لیست ها

رایج ترین لیست ها در html  لیستهای مرتب و لیستهای نامرتب هستند :

 

Ordered Lists

لیستهای مرتب با تگ <OL> شروع میشوند و عناصر  آن با تگ باز و بسته <li> از هم جدا میشوند. مثال زیر را در نظر بگیرید همانطور که مشاهده میکنید بعد از اجرا گرفتن با لیستی شماره گذاری شده که از ۱ به صورت صعودی رشد میکند مواجه میشویم، این شماره گذاری پیش فرض است. در ادامه مطلب با نوع های دیگر نیز آشنا میشویم:

  
 <html>
 <head>
 <title>ordered list</title>
 </head>
 <body>
 <ol>
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol> 
 </body>
</html>

Capt548ure

Ordered List -خصوصیت type

توسط ویژگی type ما میتوانیم مقادیر دیگری برای شماری گذاری و مرتب کردن آیتم های لیست خود داشته باشیم

 

Type توضیح
type=”1″ آیتم های لیست با اعداد شماره گذاری میشوند(پیش فرض)
type=”A” آیتم های لیست با حروف بزرگ شماره گذاری میشوند
type=”a” آیتم های لیست با حروف کوچک شماره گذاری میشوند
type=”I” آیتم های لیست با حروف بزرگ رومی شماره گذاری میشوند
type=”i” آیتم های لیست با حروف کوچک رومی شماره گذاری میشوند

 <ol type="1|A|a|I|i">
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol>

Unordered List

لیستهای نا مرتب با تگ <ul>  شروع و عناصر آن با تگ باز و بسته <li>  از هم جدا میشوند.آیتم ها با گلوله های تو پر   به صورت پیش فرض علامت گذاری میشوند. شکلهای دیگری هم هست که با خصوصیت style میشه آنها را تغییر داد. در بخش css به آن میپردازیم.

 <html>
 <head>
 <title> Unordered List</title>
 </head> 
 <body>
 <ul>
 <li>avalin</li>
 <li>dovomin</li>
 <li>sevomin</li>
 </ul> 
 </body>
</html>

unre

لیستهای  توصیفی :(Description Lists)

در ادامه به لیستی دیگری به نام لیست توصیفی میپردازیم. لیست توصیفی، لیستی از عناصر با توضیح یا توصیفی برای هر عنصر میباشد. تگ <dl> لیست توصیفی را تعریف میکند، <dt> عناصر را تعریف میکند، <dd>

توضیح هز عنصر را تعریف میکند:

 <html>
 <head>
 <title> Description Lists</title>
 </head> 
 <body>
<dl >
 <dt>Unordered List</dt>
 <dd>- The list items will be marked with bulle</dd>
 <dt>Ordered List</dt>
 <dd> - The list items will be marked with numb </dd>
</dl>
 </body>
</html>

58re