آموزش جدول و صفحه آرایی در HTML

آموزش HTML

آموزش جدول و صفحه آرایی در HTML

سلام  خدمت همراهان عزیز روز های فرد با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی قبل مراجعه فرمایید .

جداول در HTML

عنوان آموزش امروز:

جدول و صفحه آرایی

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

جدولها می توانند برای این منظور مورد استفاده قرار گیرند . جدولها برای تنظیم نگارش بسیار مفیدند.

استفاده از جدول برای صفحه آرایی مستلزم به کارگیری صفت WIDTH است . صفت WIDTH مربوط به دستور <TABLE> عرض جدول را پیکسل یا با در صد مثل %80 مشخص می کند همچنین هر پیکسل مربوط به خانه های جدول را می توان با استفاده از صفت WIDTH مربوط به دستورات <TD> یا <TH> مقدار داد.

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

سری آموزش های فتوشاپ { فصل چهارم } : روش های انتخاب کردن+ویدیو

مثال 1

صفحه آرایی با استفاده از جدول ها.

<DOCTYPE HTML PUBLIC “-/W3C//DTD HTML 4.0 TRANSITIONAL//EN!>

<html>

<head>

<title> table layout </title>

<head/>

<body>

<“table border=”0>

ه-    <tr>

ب-    <td width=”50”> <br> </td>

ج-  <“td width=”400>

ض-    <h1 align=”center”> layout is here </h1>

<hr>

<p> <h3> this is a very simple layout</p> </h3>

چ-  <td/>

خ-    <td width=”100″> &nbsp </td>

ن-  <tr/>

<table/>

<body/>

<html/>

در این مثال مقدار صفت BORDER برابر با صفر شده است . البته نیازی به این صفت نیست یعنی اگر مرورگر صفت BORDER را در دستور <TABLE> نبیند، حاشیه ای رسم نمی کند . هنگام ایجاد سلولهای خالی جدول خوب است که از <BR> برای رد کردن سطر یا فضای خالی غیر قابل شکستن (nbsp&) در خانه جدول استفاده کرد تا نظم عمودی آن خراب نشود.

جدولها می توانند با استفاده از پس زمینه صفحه آرایی دقیق تری را ایجاد کنند. در دستور <BODY> صفتی به نام BACKGROUND وجود دارد که می تواند یک فایل تصویر را به عنوان زمینه صفحه در نظر بگیرد. با استفاده از این خاصیت می توان زمینه جدول را تعیین و سپس جدول را تشکیل داد.

معرفی سایت:

https://php.net

https://laravel.com

https://html.com

مثال 2

استفاده از جدول برای صفحه آرایی صفحه وب نمونه اجرا در شکل زیر آمده است در بخشی از این برنامه تصویری به صفحه وب اضافه می شود . اگر تصویری در صفحه خود دارید آن را به جای فایل armnet.gif در دستور IMG تایپ کنید.

<DOCTYPE HTML PUBLIC “-/W3C//DTD HTML 4.0 TRANSITIONAL//EN!>

<html>

<head>

<title> table layout </title>

<head/>

<body>

<“table cellspacing=”0″ cellpadding=”10″ border=”1″ width=”550>

ه-    <tr>

ب-    <td colspan=”2″ align=”center”> <font face=”arial black” size=”+2″> institude :olom </font> </td>

<tr/>

و-    <tr>

ز-    <td width=”50%” valign=”middle”> <font face=”arial black” size=”4″> institude :olomryaneh is a publishes books about computer science.  </font> </td>

<“td width=”50” align=”center>

<“img src=”c:\arment.gif” width=”90″ height=”90″ border=”0>

<td/>

<tr/>

<tr>

<“td colspan=”2″ align=”center>

<font face=”arial black” size=”4″> institude :olomryaneh is successfull.  </font> </td>

<tr/>

<table/>

<body/>

<html/>

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

برگرفته از :

کتاب راهنمای جامع (HTML, BHTML, XML)

دکتر عین الله جعفر نژاد قمی

پاسخ به سوال دوستان :

شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟

دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از

تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.

یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.

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

برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kla

تماس با ما:     https://arazpardazesh.com/contact

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

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

چهار × دو =