A new begining
AHHP presents

HTML TABLE، خوب یا بد؟
۱۹ خرداد ۱۳۸۹ ساعت ۰۱:۲۷

طراحی Tableless چیست؟

شاید توی طراحی قالب، به عبارت Tableless (به معنای "بدون جدول") برخورده باشی یا شنیده باشی که میگن توی طراحی از از جدول کمتر استفاده کنیم.
میخوام توضیح بدم که چرا نباید زیاد از جدول استفاده کنیم یا چرا طراحهای قالب به Tableless بودن قالبهاشون می نازند.

اول از محاسن Table بگم. مهمترین و شاید تنها حسن جدول اینه که مرزهای جدول و سلولهاش قطعی هستند یعنی هیچوقت اطلاعات یک سلول از سلولش یا ستونش یا سطرش یا خود جدول بیرون نمیزنه که این کار به سادگی انجام میشه. وقتی یک جدول ساختیم و خروجیش مورد نظر ما بود، تقریبا اگر توی سایت زلزله هم بیاد و همه چی زیر و رو بشه، اطلاعات جدول بدون تغییر می مونند. این یعنی خروجی جدول خیلی قطعیت داره و به سادگی نظمش بهم نمی خوره.

اما مشکلاتش. مشکل اول اینه که اطلاعات جدول یکباره ظاهر میشه. یعنی اگر یه جدول داشته باشیم به چه گندگی، تا همه ی سلولهاش و عکسهای داخلش کاملا load نشه، خبری از جدول نیست. مثال زنده این حالت رو می تونی توی قالبهای پیشفرض وبلاگهای blogfa و persianblog اینا ببینید که کلی طول میکشه تا صفحه لود بشه و پستها یکباره ظاهر میشن و وبلاگنویس هاشون معمولا از preloader استفاده می کنند. این مشکل فقط زمانی جدی هست که مثل قابلهایی که مثال زدم، بخش اعظمی از قالب در جدول قرار بگیره و زمان نمایش محتوا رو به تعویق بندازه در غیر اینصورت قابل قبول خواهد بود.
مشکل دومش که از حسنش نشأت میگیره اینه که این قطعیت نمایش و سادگی کار باهاش یکم فریبنده است تا این حد که خلاقیت ما رو میگیره و خودمون رو در وضعیتی میبینیم که داریم واسه کوچکترین بخشهای سایت از جدول استفاده می کنیم. مشکل زمانی پیش میاد که ما بصورت بی رویه از جدولهای تو در تو استفاده کنیم. یعنی مثلا یک جدول بزرگ داشته باشیم که توی یکی از سلولهاش یه سری کد HTML به اضافه یک جدول دیگه قرار گرفته که داخل یکی از سلولهای این جدول هم جدول دیگه ای با کلی rowspan و colspan داریم. قضیه اینه که مرورگها برای پردازش این جدولهای پیچیده به نفس تنگه می افتند و صفحه امون دیرتر لود میشه که مسأله مهمیه.
این مدل جدولها فقط برای مرورگر پیچیده نیستند. برای خود ما هم ناجوره! کافیه یک تگ رو نبندیم و جدول خراب شه. اینجا پیدا این تگ، کار پدر حضرت فیل خواهد بود. موتورهای جستجو هم محتوای سایت رو پردازش می کنند و هرچی کدهای واضحتری داشته باشیم، صفحات سایتمون بهتر ایندکس میشوند و توی صفحات نتایج بهتر و مناسبتری قرار داده میشیم.
البته اینکه کدهای پیچیده، ما و مرورگر و موتورهای جستجو رو بیچاره می کنه، مختص جدول نیست ولی جدولهای پیچیده بصورت فاحشی کند پردازش میشوند.

در زیر یک جدول رو یکبار توسط تگ TABLE و یکبار توسط CSS میبینید:

<table dir="ltr" width="300" border="1" height="100" cellspacing="0">
	<tr>
		<td colspan="2">Row1, Cell 1</td>
		<td colspan="2">Row1, Cell 2</td>
		<td rowspan="3">Free Column</td>
	</tr>
	<tr>
		<td colspan="2">Row2, Cell 1</td>
		<td colspan="2">Row2, Cell 2</td>
	</tr>
	<tr>
		<td>Cell 1</td>
		<td>Cell 2</td>
		<td>Cell 3</td>
		<td>Cell 4</td>
	</tr>
	<tr>
		<td colspan="5">Free Row</td>
	</tr>
</table>

.myGrid {
	direction:ltr;
	width:300px;
	height:100px;
}

.myGrid .column {
	float:left;
	width:99px; /* 100px - 1px border-right */
	border-right:1px solid #CCC;
}
.myGrid .column:first-child {
	width:98px; /* 100px - 1px border-right/left */
	border-left:1px solid #CCC;
}

.myGrid .column .mediumCell {
	height:24px; /* 25px - 1px border-bottom */
	border-bottom:1px solid #CCC;
	line-height: 24px;
}
.myGrid .column .mediumCell:first-child {
	height:23px; /* 25px - 1px border-bottom/top */
	border-top:1px solid #CCC;
	line-height: 23px;
}

.myGrid .column .mediumCell div {
	float:left;
	width:49px; /* 50px - 1px border-left of .mediumCell */
	height:24px; /* 25px - 1px border-bottom of previous .mediumCell */
	line-height: 24px;
}
.myGrid .column .mediumCell div:first-child {
	width:48px; /* 50px - 1px border-left/right of .mediumCell */
	border-right:1px solid #CCC;
}

.myGrid .column.tall {
	height:73px; /* 75px - 1px border-bottom/top */
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	line-height: 73px;
}

.myGrid .wide {
	width:298px; /* 300px - 1px border-left/right */
	height:24px; /* 25px - 1px border-bottom */
	line-height: 24px;
	float:left;
	clear:left;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}

<div class="myGrid">
	<div class="column">
		<div class="mediumCell">Row1, Cell 1</div>
		<div class="mediumCell">Row2, Cell 1</div>
		<div class="mediumCell">
			<div>Cell 1</div>
			<div>Cell 2</div>
		</div>
	</div>
	<div class="column">
		<div class="mediumCell">Row1, Cell 1</div>
		<div class="mediumCell">Row2, Cell 1</div>
		<div class="mediumCell">
			<div>Cell 1</div>
			<div>Cell 2</div>
		</div>
	</div>
	<div class="column tall">Free Column</div>
	<div class="wide">Free Row</div>
</div>

حالا که چی؟ بصورت کلی، هرکاری با CSS قابل انجامه! توسط CSS میشه هر جدولی رو با انعطاف بالا، خصوصیات بیشتر و بهتر طراحی کرد و نه خیلی سخت اما کدهای CSS به قطعیت Table نیستند و ممکنه جایی، وقتی، اونجوری که مورد میل ماست دیده نشه ولی قابلیتهاش بیشتر خواهد بود. مهمترینش همون انعطاف بالاست. خلاصه اینکه جدول یه جاهایی کار ما رو خیلی راحت می کنه جاهایی که برای چیزهای کوچیک مجبوریم کلی CSS بنویسیم ولی نه برای جاهای بزرگ و اصلی. در عوض CSS به اصطلاح flexible هست و سایت رو روان و استاندارد می کنه. اینکه کدوم رو کجا استفاده کنیم بستگی به هنر و توانایی و موقعیت داره.
حالا چی Tableless بودن یک قالب پز دادن داره؟ ساختن یک قالب خوب و کامل بدون استفاده از جدول یعنی تخصص در بکارگیری CSS. همین.

تو چی فکر می کنی؟



مهدی : جدول فقط برای tabular data یعنی داده جدولی و div و css هم برای ظاهر و فرم بندی خلاص
(1 سال و 8 ماه و 15 ساعت و 29 دقیقه پیش)



ماهان : نمی دونم چی بگم ولی جدول بقول خودت زلزله هم بیاد خروجی ثابت داره. راستی به فکر این افتادی که که نسخه css بالا بره و نسخه مرورگر کاربر باهاش نخونه دیگه css هیچ کاره است !.
(1 سال و 6 ماه و 13 روز و 3 ساعت و 35 دقیقه پیش)

نام:
ایمیل:	(منتشر نخواهد شد!)
وب سایت:

* متن نظر شما:

کد امنیتی:

امیرحسینم. اسمم رو دوست دارم، خودم رو دوست دارم. تهران زندگی می کنم. فارغ التحصیل مهندسی صنایع هستم. برنامه‌نویسی و طراحی وب می کنم. در واقع Web Developer محسوب میشم. برنامه نویسی و وقت گذرونی با وب تنها کاریه که خسته ام نمی کنه.
آدم خیلی سردی هستم، اینو دور و وری هام میگن. ولی به نظر خودم سرد نیستم در واقع گرمای خودم رو کم بروز می دم! آدما رو اغلب دوست دارم غیر از اون مواقعی که اونا من رو نادیده میگیرن!

این سایت رو بعد از کلی اینور اونور دوباره راه انداختم تا هرچی دوست دارم توش بنویسم، چه کسی بخونه چه نخونه.
خلاصه اینجا خونه منه،