استک | قالب HTML چند منظوره با صفحه ساز Variant
ثبت نام با ایمیل
حساب کاربری دارید؟ ورود

جدول ها

این عناصر را می توان به راحتی در صفحات و بلوک های مختلف مورد استفاده قرار دهید و سفارشی سازی کنید

شما میتوانید تمام المان های بکار رفته را در قالب استک از
صفحه لیست المان ها ← مشاهده کنید

جدول ساده

این کد با استفاده از نشانه های اصلی جدول HTML یک جدول استاندارد و با عرض متغیر را نشان می دهد. 

<table class="border--round">
	<thead>
		<tr>
			<th>Value 1</th>
			<th>Value 2</th>
			<th>Value 3</th>
			<th>Value 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
مقدار 1 مقدار 2 مقدار 3 مقدار 4
1 2 3 4
1 2 3 4
1 2 3 4

ستونهای متناوب

کلاس را اضافه کنید .table--alternate-column به عنصر جدول برای جبران هر ستون دوم با رنگ پس زمینه کمی تیره تر. این هنگام ایجاد جداول گسترده با مقادیر زیادی مفید است. 

<table class="border--round table--alternate-column">
	<thead>
		<tr>
			<th>Value 1</th>
			<th>Value 2</th>
			<th>Value 3</th>
			<th>Value 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
مقدار 1 مقدار 2 مقدار 3 مقدار 4
1 2 3 4
1 2 3 4
1 2 3 4

ردیف های متناوب

کلاس را اضافه کنید .table-Alternate-Row به عنصر جدول برای جبران هر ردیف دوم با رنگ پس زمینه کمی تیره. این هنگام ایجاد جداول گسترده با مقادیر زیادی مفید است. 

<table class="border--round table--alternate-row">
	<thead>
		<tr>
			<th>Value 1</th>
			<th>Value 2</th>
			<th>Value 3</th>
			<th>Value 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
مقدار 1 مقدار 2 مقدار 3 مقدار 4
1 2 3 4
1 2 3 4
1 2 3 4