آموزش برنامه نویسی

2 عنوان در بهترین آموزش جداول HTML

آشنایی با جداول HTML

آموزش جداول HTML | از سری آموزش های برنامه نویسی به آموزش جداول در HTML در این مقاله می پردازیم.

یادگیری ایجاد جدول ها و برچسب های جدول در html یکی از مباحثی است که علاوه بر کاربردهای عمومی ، همواره برای بیشتر حرفه ای ها در دنیای وب مفید بوده است ،

زیرا از یک طرف دامنه کاربردهای آن باعث این امر شده است.

از طرف دیگر ، کمی پیچیدگی و جزئیات بصری کار را با آن دشوار کرده است ،

اگرچه این گفته که کار با جداول کار دشواری است ،

اما مطمئناً بعد از تسلط نسبی برچسب ها و نحوه استفاده از آنها صحیح نیست.

آموزش را ادامه دهید وی دید که رسم جداول در صفحات وب سفارشی چندان دشوار و پیچیده نیست.

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

البته قبل از جداول به دلیل قدرت و سهولت کار ، در طراحی لایه ها و قالب بندی صفحه وب قرار داشت.

همچنین مورد استفاده قرار می گیرد ، که امروزه به دلایلی (حداقل در پروژه هایی که به SEO یا بهینه سازی موتور جستجو تکیه می کنند)

توصیه می شود که از آن خودداری کنید ، در هر صورت جداول فرض بر این است که می توانید نتایج حاصل از تست های استفاده شده ، نمایش برنامه های زمان بندی شده ، اطلاعات آماری را نمایش دهید. و …

منظور از جدول در HTML چیست؟

چگونخ  از تگ Table در HTML استفاده نماییم؟

جداول چه کاربردی دارند؟

در ادامه آموزش جامع HTML سئو شو همراه ما باشید.

آموزش HTML — مجموعه مقالات مجله فرادرس | مجله فرادرس

آشنایی با جداول در HTML

آموزش جداول HTML | استفاده از جداول در زبان HTML روشی مناسب برای نمایش اطلاعات در یک ساختار منظم است که امکان خوانایی آسان را برای مخاطبین فراهم می‌کند.

زمانی که امکان استفاده از جداول در HTML فراهم شد، زبان CSS به صورت گسترده مورد استفاده نبود.

از این رو در آن زمان وبسایت‌ها بیشتر برپایه جداول ایجاد می‌شدند.

جداول برای مختصات‌دهی به محتوا و همچنین چیدمان عناصر داخل صفحه مورد استفاده قرار می‌گرفت.

البته جداول منحصرا برای نمایش اطلاعات ایجاد شده بودند که استفاده از آن در چیدمان صفحه باعث بروز مشکلاتی در آن می‌شد.

خوشبختانه زمان زیادی گذشته است و امروزه جداول صرفا برای ساماندهی اطلاعات مورد استفاده قرار می‌گیرند .

در عین حال از CSS برای منظم ساختن عناصر داخل صفحه و چیدمان عناصر به صورت گسترده استفاده می‌شود.

ساخت جداول در HTML همچنان یک چالش است.

طریقه ساخت جدول به صورت عمده به اطلاعات و نحوه نمایش آن بستگی دارد.

پس از ساخت جدول باید با استفاده از کد‌های CSS برای آن استایل مناسبی در نظر گرفته شود تا خوانایی آن برای کاربران روشن باشد.

ساخت جدول

آموزش جداول HTML |جداول از مجموعه‌ای از اطلاعات که در ردیف‌ها و ستون‌های مشخص قرار می‌گیرند، ساخته می‌شود. زبان HTML تگ‌های متفاوتی را برای تعریف و ساختار‌دهی این ردیف‌ها و ستون‌ها در اختیار ما قرار می‌دهد.

کاربرد جدول در صفحات html

آموزش جداول HTML |فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند،

البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید،

به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون، نمایش برنامه های زمان بندی شده، اطلاعات آماری و… استفاده کرد.

Annual, company, graph, report, summary icon

ایجاد جدول با تگ table

آموزش جداول HTML | عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است،

البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود.

<table>
</table>

ویژگی های زیادی را می توان به تگ table نسبت داد که در ادامه به آنها اشاره می کنیم.

ویژگی align

ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر زیر تعریف می شود.
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه

<table align="right">
</table>
ویژگی background

ویژگی background تصویر پس زمینه جدول را تعریف می کند که مقادیر آن باید با آدرس تصویر مورد نظر، جایگزین شود.

<table background="../html.jpg">
</table>
ویژگی bgcolor

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

<table bgcolor="#CCCCCC">
</table>
ویژگی border

ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت 1 ، 2 ، 3 و… تعیین می شود.

<table border="1">
</table>
ویژگی bordercolor

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

<table border="1" bordercolor="#FF6600">
</table>

علاوه بر این، دو ویژگی bordercolordark و bordercolorlight نیز وجود دارد که در مرورگر اینترنت اکسپلورر و برخی مرورگرهای دیگر پشتیبانی می شود، bordercolordark رنگ زاویه پائینی جدول و bordercolorlight رنگ زاویه بالایی آن را تنظیم می کند.

<table border="1" bordercolor="#FF6600" bordercolordark="#FFCC00">
</table>
ویژگی cellpadding

ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.

<table border="1" cellpadding="4">
</table>
ویژگی cellspacing

ویژگی cellspacing میزان فضا و فاصله بین سلول های داخل یک جدول را مشخص می کند، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و… تعیین می شود.

<table border="1" cellpadding="4" cellspacing="4">
</table>
ویژگی height

برای تنظیم ارتفاع کلی جدول، از ویژگی height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد 1 ، 2 ، 3 و… باشد که در واقع نمایانگر تعداد پیکسل است.

<table border="1" cellpadding="4" cellspacing="4" height="600">
</table>
ویژگی width

ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و… تعیین می شود.

<table border="1" cellpadding="4" cellspacing="4" height="600" width="800">
</table>
ویژگی rules

ویژگی rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود، در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود، اما با تعیین ویژگی rules، می توان نمایش خطوط را سفارشی کرد، ویژگی rules با چند مقدار زیر تنظیم می شود.
all: خطوط در راستای ردیف ها و ستون ها ایجاد می شود.
cols: خطوط در راستای ستون ها ترسیم می شود.
rows: خطوط در راستای ردیف ها ترسیم می شود.
groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
none: هیچ خطی داخل جدول ترسیم نمی شود.

<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all">
</table>
ویژگی title

از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.

<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all" title="عنوانی برای جدول">
</table>

ایجاد یک سطر جدید در جدول با تگ tr

از تگ tr برای ایجاد سطر جدید در جدول استفاده می شود که شباهت زیادی به عملکرد تگ پرکاربرد br در صفحات وب دارد، البته تگ tr یکتا نیست و باید پایان آن، با یک تگ دیگر بسته شود.

<table border="1">
<tr>
</tr>
</table>

ایجاد سرتیتر ها با تگ th

تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.

<table border="1">
<tr>
<th>تیتر جدول</th>
</tr>
</table>

ویژگی های فرعی تگ th

در زیر به صورت مختصر اشاره ای می کنیم به برخی ویژگی های فرعی تگ th و معنی آنها.
abbr: عبارت abbr مخفف abbreviation یا اختصار است و کاربرد آن در سرتیترهای جداول، به جهت تعیین یک متن مختصر و معرفی آن تیتر است، این ویژگی در حالت معمول قابل رویت نیست اما برای موارد خاص مانند موتورهای جستجو، می تواند مفید باشد.

<th abbr="abbr text">تیتر جدول</th>

axis: ویژگی axis (به معنی محور، قطب) برای تیترهای جداول، معرف دسته بندی آنها است و  در حالت معمول کاربرد خاصی ندارد، اما مانند abbr می تواند برای موارد خاص مورد استفاده قرار گیرد.

<th axis="category">تیتر جدول</th>

colspan: ویژگی colspan در واقع طول یک تیتر را نسبت به تگ ها td زیرمجموعه خود مشخص می کند، به فرض ممکن است یک تیتر برای دو سلول به کار رود، لذا با تنظیم colspan با مقدار 2، آن تیتر به اندازه دو سلول کشیده می شود.

<table border="1">
<tr>
<th colspan="2">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

نکته: تنظیم colspan با عدد صفر تنها برای موارد ستون های گروهی کاربرد دارد.
rowspan: ویژگی rowspan ارتفاع تیتر را نسبت به ردیف ها تعیین می کند، به فرض تنظیم عدد 2 برای مقادیر آن، تیتر را به اندازه دو ردیف ارتفاع می دهد.

<table border="1">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

valign: عنصر valign برای تیتر جداول به جهت تنظیم محل نمایش آنها از لحاظ موقعیت عمودی (vertical) کاربرد دارد، valign می تواند مقادیر زیر را دارا باشد.
– top (بالا)
– baseline (خط مبنا)
– bottom (پائین)
– middle (وسط)

<th valign="middle">تیتر جدول</th>

ایجاد سلول با تگ td

همانطور که پیش تر گفتیم، table به تنهایی معمولا کاربرد خاصی ندارد و سلول های ساخته شده با th و td هستند که به آن فرم می دهند، تگ td سلول های داخلی و در واقع محتوای داخل یک جدول را دربرمی گیرد.

<table border="1" bordercolor="#FF6600">
<tr>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای درون سلول های جدول</td>
</tr>
</table>

بیشتر مواردی که در مورد تگ th گفتیم، در باره تگ td نیز به همان صورت کاربرد دارند، افزون بر این، ویژگی nowrap با مقادیر nowrap را نیز می توان به آن افزود، از nowrap برای نمایش یک متن، در یک سطر، بدون شکستگی استفاده می شود، البته این ویژگی ممکن است در برخی نسخه های html معتبر نباشد و بهتر است به جای آن از css استفاده کنید (white-space: nowrap).

ایجاد عنوان با تگ caption

آموزش جداول HTML | تگ caption در جداول، برای ایجاد یک عنوان (سرلوحه) استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.

<table border="1" cellpadding="4" cellspacing="4">
<caption>عنوان جدول</caption>
<tr>
<th rowspan="2" valign="middle">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

گروه بندی ستون ها با تگ colgroup و col

آموزش جداول HTML | از تگ colgroup و col برای فرمت بندی ستون های جدول به صورت تفکیک شده و گروهی استفاده می شود، به فرض در یک جدول با سه ستون و سه ردیف متفاوت، می توان سه فرمت بندی متفاوت داشت، تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد، از colgroup می توان بدون col یا با آن استفاده کرد.

<table border="1">
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

استفاده از colgroup به همراه تگ col:

<table border="1">
<colgroup>
<col style="background-color:#6CF"></colgroup>
<col style="background-color:#CCC"></colgroup>
<col style="background-color:#FC0;"></colgroup>
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>

قابلیت های پیشرفته جداول HTML --- راهنمای کاربردی | مجله فرادرس

فرمت بندی با تگ های thead، tbody و tfoot

آموزش جداول HTML | سه تگ thead، tbody و tfoot شیوه ی دیگری از فرمت بندی را در جداول html ارائه می کنند، با thead می توان سرتیترها را به صورت گروهی و متمایز نشان داد، تگ tbody بر روی عناصر داخلی جدول تاثیر گذار است و tfoot ردیف پایانی یک جدول را تحت تاثیر قرار می دهد، تگ های مذکور به خودی خود تغییر خاصی ایجاد نمی کنند و باید با ویژگی های css تنظیم شوند.

<table border="1">
<thead style="color:#F60;">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
</thead>
<tbody style="color:#FC0">
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tbody>
<tfoot style="color:#CCC">
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</tfoot>
</table>

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با نحوه ترسیم جداول و خواص آنها، چند جدول متفاوت را در مثال زیر ترسیم کرده ایم که می توانید به صورت آنلاین، کد و پیش نمایش آن را ملاحظه کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ترسیم جداول در صفحات وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
نمایش بیشتر

امیرحسین شمس

امیر حسین شمس | هم اکنون در زمینه های مختلفی چون طراحی سایت ، بهینه سازی سایت ، سئو (SEO) ، امنیت سایت ، آموزش طراحی سایت ، دیجیتال مارکتینگ ، سئو و مشاوره‌ کسب و کارهای اینترنتی فعالیت دارم. از سال 1385 تحصیلات خود را در زمینه ی علوم کامپیوتر شروع کرده و دوره های هوش مصنوعی ، شبکه های عصبی ، منطق فازی ، برنامه نویسی دات نت، طراحی سایت ، دیتابیس ، امنیت دیتابیس ، دیجیتال مارکتینگ، ایمیل مارکتینگ و سئو سایت را بصورت تخصصی گذرانده ام.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
× چگونه می‌توانم به شما کمک کنم؟