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

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

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

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

 

در این جلسه میخواهیم با html table آشنا بشویم. این قابلیت به ما کمک میکند تا بتوانیم در html، داده ها و اطلاعاتی را به ستون ها و سطر ها منتقل کنیم و یک جدول یا tabel ایجاد کنیم. تگ Tabel، یک جدول html را تعریف میکند. ابتدا یک تگ باز و بسته از نوع table ایجاد میکنیم. همانند زیر:

<html>
<body>

<TABLE >

</TABLE>

</body>
</html>

سپس درون تگ باز، با استفاده از قابلیت Style، طول جدول را با مشخص کردن يک مقدار درصدي مشخص ميکنيم.

<html>
<body>

<TABLE style = “width: 100%” >

</TABLE>

</body>
</html>

با استفاده از تگ <tr> میتوان یک ردیف به صورت افقی ایجاد کرد و با استفاده از تگ <th>، داده و اطلاعات را در آن ردیف قرار داد.  در ادامه، یک تگ باز و بسته از نوع <tr> ایجاد میکنیم. سپس بین این دو تگ باز و بسته، با استفاده از تگ <th>، عبارت های Firstname و Lastname را به صورت افقی به ردیف اضافه میشوند.

<html>
<body>

<TABLE style = “width: 100%” >

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

</TABLE>

</body>
</html>

اکنون اگر برنامه را به صورت یک فایل html ذخیره کنید، خواهید دید که واژه های FirstName و LastName در یک ردیف ایجاد شده اند. همانند زیر:

th tag in html

به صورت پيش فرض، متن ها در تگ <th> به صورت پر رنگ نشان داده ميشود. از تگ <th> معمولا به صورت یک عنوان، برای جدول استفاده میشود.

اکنون از تگ <td> برای ایجاد متن، تصویر، فهرست‌ها، جداول و غیره استفاده خواهیم کرد. در اینجا من میخواهم با استفاده از تگ <td>، نام، نام خانوادگی و محل زندگی خود را در جدول نشان دهم همانند زیر:

html code

<html>
<body>

<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>

اکنون پروژه را ذخيره و اجرا کنيد.

html

ميتوانيم با استفاده از ويژگي Border، عبارت ها و فهرست ها، اطلاعات و . . .  را به صورت يک جدول یا tabel نمايش دهيم. این ویژگی، خطوطی را بین داده ها و اطلاعات ایجاد میکند. براي اين کار ابتدا يک تگ باز و بسته از نوع style ايجاد ميکنيم.  سپس بين دو تگ باز و بسته Style، عبارت table, th, td  را مينويسيم. اين عبارت يعني در table یا جدول ايجاد شده، خطوطی را در بین مقادير و داده هايي را که با استفاده از تگ th و td بوجود آمده است ایجاد کن. سپس يک آکلاد باز و بسته ايجاد ميکنيم.

<html>
<body>
<style>
table, th, td
{

}
</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: 1px soild black را ایجاد میکنیم. در این عبارت میتوانید سایز خطوط جدول را با تغییر مقدار عددی تغییر دهید. برای مثال ما در اینجا سایز ۱px را برا خطوط در نظر گرفته ایم

<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>

html learning

اکنون برنامه را ذخیره و اجرا کنید.

border in html

همانطور که مشاهده ميکنيد،با استفاده از قابليت border، يک جدول یا tabel تشکيل شد و داده ها و اطلاعات شما درون آن قرار گرفت. در ادامه، بيشتر با قابليت html tabel اشنا خواهيم شد. با ما همراه باشيد.

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

مطالب مرتبط

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

نظر: