آموزش طراحی وب سایت با html: آشنایی با html Tabel

آموزش طراحی وب سایت با html: آشنایی با html Tabel

جلسه سیزدهم: (قسمت دوم): آشنایی با html Tabel

آموزش طراحی وب سایت با Html

 

در جلسه قبل، یادگرفتیم چگونه با استفاده از تگ های <th>، <tr> ، <td>   داده و اطلاعاتمان را در یک صفحه وب نمایش دهیم.  همچنین یادگرفتیم که میتوانیم با استفاده از قابلیت border، خطوطی را بین داده و اطلاعات ایجاد کنیم تا بصورت یک جدول نمایش داده شود. قبل از مشاهده این جلسه، حتما جلسه قبل را مشاهده کنید. برای مشاهده جلسه قبل بر روی این لینک کلیک کنید.

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

html learning

<html>
<body>
<style>
table, th, td
{
border: 1px solid black;
}
</style>
<TABLE style = “width: 100%” >

<tr>
<th>FirstName</th>
<th>LastName</th>
<th>City</th>
</tr>

<tr>
<td>Amin</td>
<td>Makarem</td>
<td>shiraz</td>
</tr>

</TABLE>

</body>
</html>

اکنون میخواهیم با قابلیت border-collapse آشنا بشویم با بفهیم تفاوت این قابلیت با قابلیت border چیست؟ ما در مثال بالا، ما از border استفاده کردیم تا در بین داده و اطلاعاتی که نمایش داده میشود، خطوطی را ایجاد کنیم. همانطور که مشاهده میکنید، خطوطی که ایجاد شده اند به صورت دوتایی رسم شده اند و تشکیل یک جدول دادند. اما در ویژگی border-collapse،خطوط یا مرز هایی که بین داده ها ایجاد میشود، بصورت تکی میباشد.

برای مثال، ميخواهيم در ادامه جلسه گذشته، از عبارت ;border-collapse: collapse در پروژه قبلي استفاده کنيم. اين عبارت را در بين تگ باز و بسته style ايجاد ميکنيم. همانند زير:

border in html
همانطور که مشاهده ميکنيد، در بين تگ باز و بسته style، عبارت ;border-collapse: collapse را ايجاد کرديم تا خطوط يا مرز هاي جدول، به صورت تکي ايجاد شوند.

<html>
<body>
<style>
table, th, td
{
border: 1px solid black;
;border-collapse: collapse
}
</style>
<TABLE style = “width: 100%” >

<tr>
<th>FirstName</th>
<th>LastName</th>
<th>City</th>
</tr>

<tr>
<td>Amin</td>
<td>Makarem</td>
<td>shiraz</td>
</tr>

</TABLE>

</body>
</html>

اکنون پروژه را save کنید، فایل html ایجاد شده را باز کنید. همانطور که مشاهده میکنید، خطوط به صورت تکی رسم شده است. همانند زیر:

html border

اکنون میخواهیم با قابلیت Add Cell Padding آشنا میشویم. این قابلیت، عرض جدول را افزایش میدهید، این ویژگی، سبب میشود تا فضای درونی فیلد های جدول، افزایش پیدا کند.

ابتدا درون تگ Style، عبارت های th و td را مینویسیم. ما با استفاده از تگ <th> توانستیم عناوین یک جدول را مشخص کنیم(FirstName, LastName,City)، سپس با استفاده از تگ <td> توانستیم داده و اطلاعاتی را ایجاد کنیم و نمایش دهیم. (Amin,makarem,shiraz)، با نوشتن این دو عبارت، برنامه، فضای درونی تمام فیلد هایی که توسط این دو تگ، در جدول بوجود آمده است، افزایش میدهد

پس از نوشتن این دو عبارت، یک آکلاد باز و بسته ایجاد میکنیم و عبارت ;padding:30px را درون آن قرار میدهیم. میتوانیم فضای درونی یک فیلد یا یک سلول مربوط به یک جدول را با تغییر مقدار عددی px (پیکسل) عوض کنیم. ما در ایجاد اندازه هر فیلد را ۳۰px در نظر گرفتیم. شما میتوانید این مقدار را تغییر دهید. 

 

html padding

 

 

<html>
<body>

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

th, td
{
padding: 30px;
}
</style>

<TABLE style = “width: 100%” >

<tr>
<th>FirstName</th>
<th>LastName</th>
<th>City</th>
</tr>

<tr>
<td>Amin</td>
<td>Makarem</td>
<td>shiraz</td>
</tr>

</TABLE>

</body>
</html>

هم اکنون پروژه را Save کنید و فایل html را باز کنید، همانطور که مشاهده میکنید در جدول زیر، فضای درونی هر فیلد یا سلول، بزرگتر شده است. این خاصیت سبب میشود بتوانیم داده ها و اطلاعات بیشتری را درون هر فیلد از جدول قرار دهیم.

 

html

 

در جلسه آینده، بیشتر با قابلیت ها و ابزار های Tabel  آشنا میشویم. همچنین بعد از آشنایی با تمامی ابزار ها، اطلاعات و داده های بیشتری را درون جدول به نمایش خواهیم گذاشت.  با ما همراه باشید.

محمد امین مکارم

مطالب مرتبط

نقد و بررسی‌ها

نظر: