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

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

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

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

 

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

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

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

 

آشنایی با ویژگی Left-align Headings :

در جلسات قبل مشاهده کردید عناوینی که درون جدول پايين قرار دادیم، تقریبا در مرکز یک Field قرار میگیرند. منظور از عناوين، عبارت هاي FirstName, Lastname و age، ميباشد. همانند زیر:

 

html

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

 

 

اکنون میتوانیم با استفاده از عبارت ;text-align: left، عناوین در هر فيلد، به سمت چپ هدایت کنیم. این عبارت را بین تگ باز و بسته Style مینویسیم.

 

<html>
<body>

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

th, td
{
padding: 30px;
}

th
{
text-align: left;
}

</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 را باز کنيد، همانطور که مشاهده ميکنيد، عناوين، در سمت چپ هر فيلد نوشته شده اند.  همانند زير:

text-align-left
همانطور که مشاهده ميکنيد، عناوين FirstName, Lastname و age، به سمت راست، هدايت شده اند.

در عبارت ;text-align: left ميتوانيد واژه right را جايگزين واژه Left کنيد تا عناوين در سمت چپ يک field نوشته ميشود.

آشنايي با قابليت Border Spacing :

با استفاده از این قابلیت میتوانیم فاصله مرزی بین فیلد های جدول را مشخص میکنیم.  ابتدا یک جدول tabel تشکیل میدهیم و ۳ عنوان برای آن در نظر میگیریم. عناوینی مانند : Firstname, LastName, Age

سپس اطلاعات و داده ها را درون جدول قرار میدهیم. همانند تصوير زير:

html

 

<html>
<head>
<style>
table, th, td {
border: 2px solid Green;
padding: 5px;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<table style=”width:100%”>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

<tr>
<td>Amin</td>
<td>makarem</td>
<td>21</td>
</tr>

<tr>
<td>amirali</td>
<td>Scrowchi</td>
<td>22</td>
</tr>

<tr>
<td>iman</td>
<td>Farahi</td>
<td>34</td>
</tr>
</table>
</body>
</html>

html tabel

۱- ;border: 2px solid Green: در این قسمت، ما میتوانیم با تغییر مقدار عددی ۲px، قطر یا ضخامت خطوط جدول tabel را مشخص کنیم. و میتواینم رنگ خطوط جدول Tabel را تغییر دهیم. ما در اینجا صخامت خطوط را ۲x و زنگ خطوط جدول را Green در نظر گرفته ایم.

۲- ;padding: 5px : با تغيير مقدار عددي عبارت padding، عرض جدول و فيلد ها تغيير ميکند.

۳- ;border-spacing: 5px : با تغییر مقدار عددی border-spacing، فاصله بین فیلد های جدول، بیشتر میشود.

۴- style=”width:100%” : با تغيير مقدار درصدي، طول جدول tabel و عرض فيلد ها تغيير خواهد کرد.

۵- در این قسمت، ابتدا یک تگ باز و بسته از نوع tr ایجاد کردیم. گفتیم که این تگ برای ایجاد يک رديف افقي در يک جدول، استفاده ميشود. سپس در بین تگ باز و بسته، با استفاده از تگ th، عناوین جدول tabel را ایجاد میکنیم.

۶- در اين قسمت، همانند بالا ابتدا تگ tr را ايجاد ميکنيم تا يک رديف افقي جديد ساخته شود. سپس با استفاده از تگ td، ميتوانيم اطلاعات يا نوشته هايي را درون جدول ايجاد کنيم.

۷ و ۸ – مورد ۷ و ۸ دقیقا مانند مورد ۶ میباشد. در این ۳ مورد اخر، ما ۳ اسم برای جدول تعریف کردیم و برای هر اسم، یک ردیف افقی در نظر گرفتیم.

اکنون پروژه را ذخيره کنيد و آن را اجرا کنيد. همانطور که مشاهده ميکنيد. يک جدول با خطوط سبز رنگ براي شما تشکيل شده است که ۳ رديف افقي در آن وجود دارد، درون هر رديف، با استفاده تگ th، عناوين را تعريف کرديم و با استفاده از تگ td، داده و اطلاعات راقرار داديم. منظور از داده و اطلاعات، نام، نام خانوادگي، و سن ميباشد. با ما همراه باشيد.

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

مطالب مرتبط

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

نظر: