‎‎استايل بندي جدولHTML Table Styling -‎

‎با استفاده از امكاناتCSS ميتوان جدول بفرمي تنظيم استايل نمود كه در نمايش بهتروزيباتر ديده ‎شود.

‎‎فرم راه راهي جدولHTML Table-‎Zebra Stripes

‎اگر براي هر سطراز جدول رنگ پس زمينه اضافه نمائيد، شكل وشمايل راه راهي يا گورخري پيدا ميكند ‎مخصوصا اگرسطرها يك درميان همرنگ باشند.

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

‎‎مثال ـ نمونه جدول با شمايل راه راهي

‎

tr:nth-child(even) {
  background-color: #D6EEEE;
}

--(go to editor for change code and run)

‎

‎‎نكته ـ اگر بجايeven كلمهodd استفاده شود دراين مثال رديفهاي1 و2و3بجاي2 و4و6ابي ميشوند.

‎‎فرم راه راهي عموديHTML Table -‎Vertical Zebra Stripes -‎

‎‎براي ايجاد فرم راه راهي عمودي در جدول بجاي سطر بايد ستون انتخاب شود.

‎براي عمودي بايد عناصر جدول كه معرف ستون ميباشند،يعنيtd و th بايد در استايل مطابق مثال ‎عمل شوند .يعني‎:nth-‎child(even)‎ براي هر دو اعمال شود .

‎‎مثال ـ ايجاد نوارعمودي در جدول

‎

th:nth-child(even),td:nth-child(even) {
  background-color: #D6EEEE;
}

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

th:nth-child(even),td:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body style="background-color: white;">

<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

</body>
</html>

--(go to editor for change code and run)

‎

‎نكته ـnth-‎child()‎ يك انتخابگر است .اگر در فرم راه راه ستوني عناصر:th هم شامل شود، بايدth ‎وtd با انتخابگر مشابه مثال بالا معرفي شوند .

‎‎راه راه عمودي وافقيCombine Vertical and Horizontal Zebr Striptes-‎

‎‎ميتوان استايلهاي دو مثال قبلي را تركيب نمود، كه فرم راه راه سطري وستوني شكل بگيرد.

‎اگر از يگ رنگ شفاف استفاده شود، جلوه همپوشاني خواهد داشت .براي شفافيت رنگ، ازفرم رنگ ‎rgba()‎‎‎استفاده كنيد .

‎‎مثال ـ راه راه سطري وستوني

‎

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

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

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}
</style>
</head>
<body style="background-color: white;">

<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

</body>
</html>

--(go to editor for change code and run)

‎‎جداكننده هاي افقيHorizontal Diveders -‎

Horizontal Dividers

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

‎اگر براي هر سطر جدول فقط مرز پائيني يعني‎border-‎bottom‎ معرفي شود اين ‎بعنوان جداكننده افقي نمايان ميشود.

‎براي اين كاراگر درCSS ‎<style>‎ براي عنصر ‎tr‎ مرز پائيني ‎مطابق مثال زير تعريف شود، آن براي تمام عناصر سطر اعمال ميشود.

‎‎مثال ـ جداكننده افقي

‎

tr {
  border-bottom: 1px solid #ddd;
}

‎Hoverable Table‎

‎براي هاي لايت سطرهاي جدول ازانتخابگر‎:hover‎ روي عنصر‎tr‎ در CSS ‎<style>‎‎ ‎استفاده ميشود.

‎‎در اين حالت هنگاميكه موس روي سطري از جدول قرار بگيرد آن سطر با رنگ معرفي شده نمايان ميشود.

‎‎مثال ـ نمونه قابليت برجستگي سطرهاي جدول

‎

tr:hover {background-color: #D6EEEE;}

--(go to editor for change code and run)

Previous > <Next

‎‎استايل بندي جدولHTML Table Styling -‎

‎‎فرم راه راهي جدولHTML Table-‎Zebra Stripes

--(go to editor for change code and run)

‎‎فرم راه راهي عموديHTML Table -‎Vertical Zebra Stripes -‎

--(go to editor for change code and run)

‎‎راه راه عمودي وافقيCombine Vertical and Horizontal Zebr Striptes-‎

--(go to editor for change code and run)

‎‎جداكننده هاي افقيHorizontal Diveders -‎

Horizontal Dividers

--(go to editor for change code and run)

‎Hoverable Table‎

--(go to editor for change code and run)

HTML tutorial آموزش اچ تی ام ال

HTML Forms فرمهای اچ تی ام ال

HTML Graphicsگرافیک اچ تی ام ال

HTML Media رسانه

HTML APIs

HTML References

Sitemap Protocol