رسم جدول بخش یک

سلام 

سال نو مبارک 

قصد دارم در طی دو یا سه پست تمام مراحل رسم یک جدول حرفه ای را با استفاده از کدهای html  و دادن یک استایل حرفه ای به جداول توسط css3  و JQuery  را دذر وبلاگ css3 قرار بدم برای شروع و آشنایی با مقدمات و طراحی ساده یک جدول به ادامه مطلب مراجعه فرمایید 

ابتدا کدهای html  یک جدول را بررسی می کنیم

عنوان تگ	توضیح	محل قرار گیری
Table	تگ اصلی و معرف جدول	در هرجای سند html
Caption	عنوان جدول (دلخواه)	در داخل تگ table و خارج از تگهای دیگر
THead	سر تیتر جداول	در داخل تگ table و خارج از تگهای دیگر
TBody	بدنه جدول	در داخل تگ table و خارج از تگهای دیگر
TFoot	آخرین ردیف جدول	در داخل تگ table و خارج از تگهای دیگر
TR	یک ردیف (الزامی)	در داخل تگ های table, thead, tbody, tfoot
TH	عنوان ستون های جدول	بعد از تگ tr
TD	سلول های جدول	بعد از تگ tr
colgroup	یک گروه از ستون ها	در داخل تگ table و خارج از تگهای دیگر
col	یک ستون	در داخل colgroup به صورت تگ بسته <col/>

رسم جدول ساده

یک جدول ابتدایی از چند ستون و ردیف در کنار هم ساخته می شود من کد رسم یک جدول 2 در 2 را در ادامه قرار می دهم :

	<table>
		<tr>
			<td> TD </td>
			<td> TD </td>
			<td> TD </td>
		</tr>
		<tr>
			<td> TD </td>
			<td> TD </td>
			<td> TD </td>
		</tr>
	</table>

	<table>
		<tr>
			<td> TD </td>
			<td> TD </td>
			<td> TD </td>
		</tr>
		<tr>
			<td> TD </td>
			<td colspan="2"> TD </td>
			
		</tr>
	</table>

	<table>
		<tr>
			<td rowspan="2"> TD </td>
			<td> TD </td>
			<td> TD </td>
		</tr>
		<tr>
			<td colspan="2"> TD </td>
			
			
		</tr>
	</table>

نتیجه:

برای درک بهتر هر کدام از تگهای استفاده شده در کدهای بالا روی آن تگ کلیک نمایید

دو نمونه دیگر را هم ببینید:       نمونه اول   نمونه دوم    نمونه سوم

TD	TD	TD
TD	TD	TD

TD	TD	TD
TD	TD

TD TD	TD	TD
	TD