مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش ایجاد جدول و کار با جدول ها در HTML
جداول HTML به نویسندگان وب اجازه می دهد، داده هایی مانند متن، تصاویر، لینک ها، جداول دیگر، و غیره را در ردیف ها و ستون هایی به صورت مرتب قرار دهند.
جداول HTML با استفاده از تگ <table> ساخته می شودکه در آن تگ <tr> برای ایجاد سطرهای جدول استفاده می شود و تگ <td> برای ایجاد سلول های داده، مورد استفاده قرار می گیرد. عناصر زیر <td> به صورت منظم و به طور پیش فرض، چپ چین، قرار می گیرند.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
در اینجا، border یکی از ویژگی های (attribute) تگ <table> است و از آن برای قرار دادن border در تمام سلول ها استفاده می شود. اگر شما به border نیاز ندارید، می توانید از border = "0" استفاده کنید.
عنوان جدول (Table Heading)
عنوان جدول را می توان با استفاده از تگ <th> تعریف کرد. این تگ جایگزین تگ <td> می شود، که برای نشان دادن سلول داده ی واقعی استفاده می شود. به طور معمول بالاترین ردیف (row) را به عنوان "عنوان جدول" تعیین می کنیم، در غیر اینصورت می توانید عنصر <th> را در هر ردیف استفاده کنید. عنوان ها، که در تگ <th> تعریف شده اند، به طور پیش فرض در مرکز سلول (center) و با فونت bold نمایش داده می شوند.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
ویژگی ها ی Cellpadding و Cellspacing
دو خصیصه به نام cellpadding و cellpacing وجود دارد که شما برای تنظیم فضای سفید در سلول های جدول خود استفاده می کنید.
Attribute یا ویژگی cellspacing فضای بین سلول های جدول را تعریف می کند، در حالی که cellpadding نشان دهنده فاصله بین حاشیه و محتوای داخلی سلول است.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
پس زمینه های جداول (Tables Backgrounds)
شما می توانید پس زمینه جدول (background) را با استفاده از یکی از دو روش زیر تنظیم کنید -
- ویژگی bgcolor – به وسیله ی attribute ی با نام bgcolor شما می توانید رنگ پس زمینه (background) را برای کل جدول یا فقط برای یک سلول تنظیم کنید.
- ویژگی background - به وسیله ی attribute ی با نام background شما می توانید تصویر پس زمینه ای را برای کل جدول یا فقط برای یک سلول تنظیم کنید.
همچنین می توانید رنگ حاشیه را با استفاده از ویژگی bordercolor تنظیم کنید.
نکته :
ویژگی های bgcolor، background و bordercolor در HTML5 نادیده گرفته شده اند.توصیه می شود از این ویژگی ها استفاده نکنید.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
در اینجا مثالی از استفاده از ویژگی background آورده ایم. که در آن از یک تصویر موجود در دایرکتوری /images استفاده خواهیم کرد.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند. در اینجا تصویر پس زمینه فقط به header جدول اعمال نمی شود، بلکه به کل جدول اعمال می شود.
ارتفاع و عرض جدول (Table Height and Width)
شما می توانید عرض و ارتفاع جدول را با استفاده از ویژگی های عرض (width) و ارتفاع (height) تنظیم کنید. همچنین می توانید عرض یا ارتفاع جدول را به صورت پیکسل و یا به صورت درصدی از صفحه نمایش، مشخص کنید.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
شرح جدول (Table Caption)
تگ caption به عنوان یک title یا توضیحی درمورد جدول استفاده می شود و در بالای جدول نشان داده می شود. این تگ در نسخه جدیدتر HTML / XHTML استفاده نمی شود.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
تیتر، بدنه و پاورقی در جدول (Table Header, Body, and Footer)
جداول را می توان به سه بخش تقسیم کرد: تیتر (Header)، بدنه (Body) و پاورقی (Footer).
تیتر (Header) و پاورقی (Footer) بسیار شبیه به تیتر و پاورقی در فایل پردازش word می باشد، که برای همه صفحات یکسان می باشد، در حالیکه بدنه یا body دربرگیرنده محتوای اصلی جدول می باشد.
سه عنصر برای جدا کردن تیتر (Header)، بدنه (Body) و پاورقی (Footer) عبارتند از -
<thead> - برای ایجاد تیتر جداگانه در جدول.
<tbody> - برای نشان دادن قسمت اصلی جدول.
<tfoot> - برای ایجاد یک پاورقی مجزا در جدول.
یک جدول ممکن است حاوی چندین عنصر <tbody> برای نشان دادن صفحات یا گروههای مختلف از داده ها باشد. اما قابل توجه است که برچسب <thead> و <tfoot> باید قبل از <tbody> ظاهر شوند.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
جداول تودرتو (Nested Tables)
شما می توانید از یک جدول در داخل جدول دیگری استفاده کنید. نه تنها جداول بلکه شما می توانید تقریبا تمام تگ ها را در داخل تگ <td> استفاده کنید.
مثال :
در زیر نمونه ای از استفاده از یک جدول و تگ ها را درون یک سلول جدول نشان می دهد.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
