نحوه درج فایل جدول در html دانشگاه آموزشی دولتی اورال
تگ colspan - ترکیب ستون هارایج ترین استفاده از جداول ساختارهای پیچیده، نشانه گذاری صفحات وب است. به تصویر نگاه کن:
به نظر می رسد که ما نیاز داریم که ردیف های اول و سوم هر کدام یک ستون داشته باشند. این با استفاده از پارامتر به دست می آید کلسپنبرچسب زدن
مثلا،
برای مثال ما:
عنوان سند
| هدر سایت | |
| منو | محتوا |
| پایین سایت | |
توجه داشته باشید که سطرهای اول و سوم هر کدام دارای یک ستون هستند.
بیایید نمونه دیگری از نشانه گذاری صفحه وب را بررسی کنیم:
| هدر سایت | |||||
| منو | منو | منو | منو | منو | منو |
| اخبار | محتوا | ||||
تعداد - چند سطر و ستون در این جدول وجود دارد؟ برای انجام این کار، به صورت ذهنی یک شبکه را روی نقاشی اعمال کنید. این باعث ایجاد سه ردیف و شش ستون می شود.
سطر اول شامل یک ستون است که شامل شش ستون است. بیایید این را بنویسیم:
ردیف دوم از شش ستون تشکیل شده است:
خط سوم شامل دو ستون است که اولی شامل دو ستون و دومی چهار ستون است:
آنقدرها هم سخت نیست. ما به صورت بصری شبکه را روی نقاشی قرار می دهیم و ردیف ها را یکی یکی از بالا به پایین می نویسیم و تعداد ستون های مورد نیاز در هر کدام را توصیف می کنیم.
برچسب پهنای ردیف - الحاق ردیف ها
اگر به نشانه گذاری مانند این نیاز داشته باشیم چه؟
لطفا توجه داشته باشید که در ردیف دوم فقط یک ستون داریم، زیرا ستون اول از سطر اول امتداد دارد که به سادگی شامل دو می شود.
در نگاه اول، این ممکن است دشوار به نظر برسد، اما با کمی تمرین می توانید جداول با هر پیچیدگی ایجاد کنید.
بیایید به مثال دیگری نگاه کنیم:
| یک کلاه | منو |
| محتوا | |
| پایین سایت | |
بنابراین در سطر اول دو ستون داریم که ستون دوم این دو سطر را به هم متصل می کند. بیایید این را بنویسیم:
ردیف دوم یک ستون است (فقط قسمتی از آن توسط ستون دوم ردیف اول پنهان شده است):
در نهایت، ردیف سوم یک ستون است که شامل سه ستون است:
با استفاده از این دو گزینه طول ردیفو کلسپنشما می توانید جداول با هر پیچیدگی ایجاد کنید. تمرین.
میزهای تو در تو
همانطور که از نام آن پیداست، می توان یک جدول را در داخل دیگری یا در هر ستونی قرار داد. بیایید این کار را با استفاده از آخرین نشانه گذاری خود به عنوان مثال انجام دهیم.
بنابراین ما این کد را داریم.
09.11.2015
سلام به همه!
بیایید به یادگیری اصول HTML ادامه دهیم. در این درس به شما می گویم و مثال هایی را نشان می دهم نحوه ساخت جدول در HTML. همچنین به نحوه تنظیم رنگ سلول‌های جدول، نحوه قرار دادن جدول در مرکز، یادگیری نحوه ساخت حاشیه جدول و غیره خواهیم پرداخت.
جداول HTML اغلب در HTML برای فهرست کردن برخی اطلاعات استفاده می شود. قبلاً از جداول برای ایجاد چارچوب صفحات وب استفاده می شد:
...اما این قبلاً مربوط به گذشته است، زیرا امروزه روش های موثرتری برای ایجاد وایرفریم برای یک وب سایت با . من اغلب از یک جدول در وبلاگ یا وب سایت خود استفاده می کنم، به عنوان مثال، مانند در .
فکر می کنم متوجه شده اید که چرا باید یاد بگیرید که چگونه یک جدول ایجاد کنید.
جدول از چه تگ های اصلی تشکیل شده است؟
○ برچسب جدول
این محفظه اصلی برای ایجاد یک جدول است که شامل سایر عناصر جدول مانند ستون ها و ردیف ها است.
تگ بسته شدن الزامی است.
○ برچسب تیآر
داخل ظرف ……
ردیف ها قرار می گیرند:
ستون ها با استفاده از یک برچسب ایجاد می شوند
تگ بسته شدن الزامی است.
توجه:ایجاد جدول بدون استفاده از این همه تگ غیرممکن است.
حالا بیایید سعی کنیم از تئوری استفاده کنیم و در عمل یک جدول ایجاد کنیم.
ورزش:یک جدول یک ردیفی با سه ستون ایجاد کنید.
| ردیف -1 / ستون 1 | ستون 2 | ستون 3 |
ورزش:یک جدول از سه ردیف و سه ستون ایجاد کنید.
| ردیف -1 / ستون 1 | ستون 2 | ستون 3 |
| ردیف -2 / ستون 1 | ستون 2 | ستون 3 |
| ردیف -3 / ستون 1 | ستون 2 | ستون 3 |
آیا تا اینجا همه چیز برای شما روشن است؟ کسی که نمی فهمد دستت را بلند کن! بله، همه ما درک می کنیم، پس بیایید ادامه دهیم.
حال بیایید به ویژگی های جدول نگاه کنیم.
*ویژگی های
○ حاشیه های جدول در HTML
برای نمایان شدن جدول، به تگ بروید
اگر مقدار ویژگی «
مرز»
"0"، مرز قابل مشاهده نخواهد بود مگر اینکه به برچسب اضافه شود
نتیجه: ○نحوه ادغام سلول ها در جدول برای ترکیب سلول ها در جدول از ویژگی ها استفاده کنید "کلسپن"و "span" به تگ <
td>
. در مقادیر، تعداد سلول هایی را که می خواهید ادغام کنید مشخص کنید.
نتیجه: نتیجه: مثال پیچیده تر:
نتیجه: ○ چگونه فضای بین سلول های جدول را افزایش دهیم برای افزایش فاصله بین متن و حاشیه سلول، ویژگی را اضافه کنید "بالشتک سلولی"برای برچسب زنی
در مقادیر ویژگی "cellpadding" فاصله تورفتگی را مشخص کنید
نتیجه: برای افزایش فاصله بین سلول ها در جدول، از ویژگی استفاده کنید "فاصله سلولی"برای برچسب زنی
در مقادیر ویژگی "فاصله سلولی"فاصله بین سلول ها را مشخص کنید
نتیجه: ○ چگونه یک پس زمینه جدول HTML بسازیم برای ایجاد پس‌زمینه جدول HTML از برچسب to استفاده کنید نتیجه: ○ نحوه درج تصویر در جدول HTML برای درج یک تصویر در جدول HTML، بین تگ
نتیجه: مقادیر بر حسب پیکسل (px) یا درصد (%) مشخص می شوند. ○ تراز کردن محتوا در جدول HTML برای تراز کردن محتوا در یک جدول HTML، از برچسب to استفاده کنید تراز کردن- تراز افقی مطالب در جدول. معتبر- تراز عمودی محتوا در جدول.
نتیجه: ○ چگونه یک جدول HTML را در مرکز قرار دهیم برای وسط یک میز، باید میز را با یک برچسب بپیچید
نتیجه: حالا کار با جداول تمام شد. اکنون می توانید جدولی با هر پیچیدگی ایجاد کنید. این درس را پین کنید. سعی کنید هر جدولی را خودتان بسازید. پست قبلی جدول مجموعه ای از داده های توزیع شده در ردیف ها و سلول ها است. بیشتر سلول‌ها حاوی داده‌های جدولی هستند؛ سایر سلول‌ها حاوی عناوین ردیف و ستون هستند که محتوا را توصیف می‌کنند. برای ایجاد جدول در یک سند HTML، از تگ استفاده کنید ایجاد جدول همیشه با ردیف هایی شروع می شود که با استفاده از تگ تعریف می شوند در HTML دو تگ مختلف برای ایجاد سلول وجود دارد که اولی این است
HTML توانایی ایجاد جداول تو در تو، یعنی جداولی که در داخل جداول دیگر قرار دارند را دارد. برای ساختن یک جدول تودرتو، باید کد جدولی را که می خواهید به صورت تودرتو در داخل هر برچسبی قرار دهید. به عنوان مثال، بیایید جدولی را که قبلاً ایجاد کردیم، در نظر بگیریم و این کد را در سلول دوم ردیف دوم قرار دهیم:
L هر جدول در HTMLمجموعه ای از ردیف ها و ستون هایی است که در محل تقاطع آنها سلول ها وجود دارد. ایجاد جداول در HTML بسیار ساده است، فقط باید مدل نهایی را تصور کنید. در HTML، جداول نه تنها برای ارائه داده ها استفاده می شود، بلکه می توان از آنها برای قرار دادن بلوک های متن، تصاویر و غیره استفاده کرد. در یک صفحه وب، یعنی با کمک آنها می توانید طرح بندی خود صفحه را ایجاد کنید. برای ایجاد جداول در HTML، عنصر جدولو تمام کدها (محتوای آن)جداول بین تگ ها قرار دارند
. ویژگی های این عنصر مقادیر را برای کل جدول تنظیم می کند: بیایید یک کد مثال برای جدولی با پس‌زمینه آبی، ضخامت خط 1 پیکسل به رنگ سفید، لایه‌بندی داخل و خارج سلول‌های 2 پیکسل، عرض 100 درصد صفحه بنویسیم: bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" > هر جدول باید حداقل یک ردیف داشته باشد که توسط برچسب ها مشخص می شود
. در مثال زیر به مثالی از اضافه کردن یک خط نگاه می کنیم: bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" > سلول‌ها ستون‌های عمودی جدول را تشکیل می‌دهند که توسط برچسب‌ها مشخص می‌شوند
. سلول ها را به جدول خود اضافه کنید: bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" > سلول شماره 1 جدول حاصل را خواهیم دید: در برخی موارد، ممکن است لازم باشد که یک ستون را روی چندین ردیف کشیده شود؛ برای این کار، از ویژگی استفاده می شود طول ردیف، که مقدار آن تعداد ردیف های مورد نیاز برای ادغام را تعیین می کند. بیایید به یک مثال نگاه کنیم: bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" > rowspan="2" > ردیف های شماره 1 و شماره 2 ادغام می شوند سلول شماره 3 خط شماره 3 مرورگر نمایش خواهد داد: ستون ها با استفاده از همان اصل و فقط با استفاده از ویژگی ترکیب می شوند کلسپن. بیایید به یک مثال نگاه کنیم: bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" > colspan="2" >ستون های شماره 1 و شماره 2 ادغام می شوند سلول شماره 1 سلول شماره 4 مرورگر نمایش خواهد داد: ویژگی های کلسپنو طول ردیفمی تواند به طور همزمان استفاده شود. در مرورگر به شکل زیر خواهد بود: یا مثل این: سعی کنید کد را خودتان بنویسید! ارتفاع و عرض را می توان هم برای کل جدول به عنوان یک کل و هم برای ردیف ها و ستون های جداگانه تنظیم کرد؛ این کار با استفاده از ویژگی های آشنا انجام می شود. عرضو ارتفاع، مقادیر هم به صورت پیکسل و هم درصد مشخص می شوند. تراز افقی جدول توسط ویژگی مشخص می شود تراز کردن، معانی از قبل برای شما آشنا هستند: چپ، مرکز، راست. و برای تراز کردن متن در سلول های جدول، ویژگی تراز افقی تراز کردنباید برای هر تگ اعمال شود td. استفاده از CSS این کار را بسیار ساده تر می کند. برای تراز عمودی محتویات سلول ها، از ویژگی استفاده کنید valign. همچنین مقادیر خاص خود را دارد - تراز عمودی به مرکز وسط، بر روی بالاو در امتداد پایین پایینخط پایه (خطی که متن خط جاری روی آن قرار دارد). تصویر پس‌زمینه یا رنگ را نیز می‌توان برای کل جدول یا برای یک سلول جداگانه تنظیم کرد، این همه بستگی به اهدافی دارد که دنبال می‌کنید. این - برای تصویر - توسط ویژگی تنظیم شده است زمینه، که مقدار آن مسیر فایل گرافیکی مورد نیاز را مشخص می کند. برای پس زمینه رنگی - ویژگی bgcolor، در اینجا مقدار نام رنگ است. این اساساً تمام چیزی است که برای سطح ورودی نیاز دارید. در پایان بخش ساخت جداول در HTML، اولین آشنایی شما با زبان HTML به پایان می رسد. با استفاده از جداول در HTMLشما می توانید قالب های ساده صفحه وب ایجاد کنید، بنابراین پیشنهاد می کنم اولین قالب کامل خود را همین الان ایجاد کنید. مواد پوشش داده شده برای این کار کاملاً کافی است. پیش به سوی فتح هایپرفضا! جدول یکی از ابزارهای اصلی برای ایجاد صفحات وب است. بدون استفاده از CSS، تنها با استفاده از جداول می توانید صفحاتی با طرح های پیچیده ایجاد کنید. اگر مجموعه دروس ساخت یک وب سایت - مراحل اول را کامل کرده اید، آنگاه متوجه می شوید که در مورد چه چیزی صحبت می کنیم. هر جدول مجموعه‌ای از ردیف‌ها و ستون‌ها است که در محل تقاطع آنها سلول‌هایی وجود دارد. مثلا: بیایید به جدول خود از منظر HTML نگاه کنیم: نتیجه: همانطور که می بینید، خیلی خوب ظاهر نشد، ما آن را تزئین می کنیم. برای این منظور برچسب نتیجه: این بهتر است، اما جدول ما به لبه سمت چپ پنجره فشار داده می شود، همانطور که متن در آن است. بیایید با اضافه کردن سه پارامتر دیگر این مشکل را برطرف کنیم: نتیجه: لطفا توجه داشته باشید که جدول دارای حاشیه های دوتایی است. اگر مشخص کنید cellpacing = "0"، سپس مرزها به شکل معمولی در می آیند: به طور کلی، دو پارامتر مسئول مرزها هستند: نتیجه: جداول ردیف به ردیف تشکیل می شوند. بنابراین، پارامترهای مشخص شده در خط (tr) اثر خود را به تمام سلول های (td) خط گسترش می دهند. رشته ها می توانند سه پارامتر داشته باشند: نتیجه: لازم به ذکر است که اگر عرض و ارتفاع را تنظیم نکنید، جدول با توجه به محتوا تشکیل می شود (در مثال های قبلی اینگونه بود). این درس به پایان رسید، ایجاد و طراحی جداول را تمرین کنید، در درس بعدی به این مهارت ها نیاز خواهید داشت، جایی که جداول ساختارهای پیچیده را ایجاد می کنیم.
اعمال میشود صفت "مرز
»
.
صفت "مرز"، حاشیه در جدول نیز قابل مشاهده نخواهد بود.
ردیف -1 / ستون 1
ستون 2
ستون 3
ردیف 1 ستون 1
ردیف 2 ستون 1
ردیف 2 ستون 2
ردیف 1 ستون 1
ردیف 1 ستون 2
ردیف 2 ستون 1
ردیف -1 / ستون 1
ستون 2
ستون 3
ردیف -2 / ستون 1
ستون 2
ستون 3
ستون 4
ردیف 1 ستون 1
ستون 2
ردیف 1 ستون 1
ستون 2
و
صفات زیر:
ردیف -1 / ستون 1
ستون 2
ستون 3
ردیف -2 / ستون 1
ستون 2
ستون 3
ستون 4
درج برچسب
.
ردیف 1 سلول 1
سلول 2
صفت "تراز کردن"و "والین"
:
ارزش های:
ارزش های:متن
سلول پیش فرض
محتوا را به صورت افقی در امتداد لبه سمت راست، عمودی تراز کنید - آن را به پایین فشار دهید
محتوا را به صورت افقی در امتداد لبه چپ، عمودی تراز کنید - آن را به بالا فشار دهید
محتویات را به صورت افقی در مرکز، عمودی تراز کنید - آنها را در وسط فشار دهید
ردیف -1 / ستون 1
ستون 2
ستون 3
برچسب های اضافی و اصلی برای جدول
عنوان 1
عنوان 2
1
2
من مشتاقانه منتظر دیدار شما در درس بعدی هستم. در به روز رسانی های وبلاگ من مشترک شوید.
ورودی بعدی ، نشان دهنده ظرفی است که تمام محتویات جدول را در خود دارد.
، هر ردیف به نوبه خود از سلول ها تشکیل شده است. برچسب بزنید فقط می تواند حاوی برچسب هایی برای ایجاد سلول باشد.
، سلول های داده منظم را ایجاد می کند. به طور پیش فرض، محتویات را تگ کنید در سمت چپ تراز شده است. دومین تگ برای ایجاد سلول ها تگ است ، به شما امکان می دهد سلول هایی را تعریف کنید که حاوی عناوین ستون ها یا ردیف ها هستند، محتویات چنین سلول هایی با متن پررنگ و تراز وسط نمایش داده می شوند. برچسب ها و ممکن است شامل هر عنصر HTML باشد که برای استفاده در بدنه سند موجود است.
تلاش كردن "عنوان اول عنوان دوم ردیف 1، سلول 1 ردیف 1، سلول 2 ردیف 2، سلول 1 ردیف 2، سلول 2 میز در یک میز
.
عنوان اول عنوان دوم ردیف 1، سلول 1 ردیف 1، سلول 2 ردیف 2، سلول 1
ردیف 2، سلول 2
عنوان اول عنوان دوم ردیف 1، سلول 1 ردیف 1، سلول 2 ردیف 2، سلول 1 ردیف 2، سلول 2 عنصر TABLE، یک جدول ایجاد کنید
یک خط اضافه کنید
افزودن سلول ها
سلول شماره 2
سلول شماره 3رشته های به هم پیوسته
سلول شماره 1
سلول شماره 2
سلول شماره 4
سلول شماره 5
سلول شماره 6خطوط #1 و #2 ادغام شده اند
سلول شماره 1
سلول شماره 2
سلول شماره 3
سلول شماره 4
خط شماره 3
سلول شماره 5
سلول شماره 6
ادغام ستون ها
ستون شماره 3
سلول شماره 2
سلول شماره 3
سلول شماره 5
سلول شماره 6ابعاد و تراز جدول
پس زمینه میز
سرانجام
/
مواردی که بدون آن نمی توانید یک وب سایت ایجاد کنید:
∼
∼
بیایید جدولی ایجاد کنیم که در آن محل تلاقی اعداد سطر و ستون را به عنوان محتوا مشخص کنیم:
,
,
,
. پارامترهای جدول HTML: تورفتگی، عرض، رنگ پس زمینه، قاب
تعدادی پارامتر وجود دارد:
بیایید این پارامترها را اعمال کنیم:
بیایید این پارامترها را اعمال کنیم: نتیجه:
با استفاده از این پارامترها، می توانید مرزها را به شکلی که می خواهید تعیین کنید. در اینجا ما فقط یک مثال می زنیم، همه آنها را خودتان آزمایش کنید. 
لازم به ذکر است که حاشیه ها در مرورگرهای مختلف کمی متفاوت نمایش داده می شوند.تگ های HTML tr و td
بیایید به یک مثال نگاه کنیم:
به عنوان مثال، بیایید به کد خود، در تگ ها اضافه کنیم
این پارامترها 1
2
3
