.

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

در واقع، یکی از گزینه های موثر ایجاد یک اسکرول افقی برای جدول است. انجام این کار دشوار نیست، اما موضوع پست امروز این نیست. با این حال، من آن را برای شما نشان خواهم داد.

روش اول سازگاری

<div class = "table-wrap" > <جدول > <سر > <tr > <th >سرویس</th> <th >شرح</th> <th >قیمت</th> <th >تخفیف</th> </tr> </thead> <tbody > <tr > <td >چیدمان موبایل</td> <td >طرح بندی برای گوشی ها</td> <td >$3000</td> <td > 50%</td> </tr> <tr > <td >فرود بر روی CMS WordPress</td> <td ></td> <td >$3000</td> <td > 30%</td> </tr> </tbody> </جدول> </div>

بیایید به کل این چیز را استایل کنیم (عمدتاً باید استایل کنیم رومیزی).

1 2 3 4 5 6 7 8 9 10 11 12 13

.table-wrap (تراز کردن متن: مرکز؛ نمایشگر: بلوک درون خطی؛ رنگ پس‌زمینه: #fff؛ بالشتک: 2rem 2rem؛ رنگ: #000؛ .table-wrap (سرریز-y: اسکرول؛))

جدول بسته بندی (تراز نوشتاری: مرکز، نمایشگر: بلوک درون خطی، رنگ پس‌زمینه: #fff؛ بالشتک: 2 rem 2rem؛ رنگ: #000؛ ) صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) (.table-wrap (سرریز-y: اسکرول؛ ))

در نتیجه، در عرض تا 600 پیکسل، جدول پیمایش می‌کند، اما سایت نه. راحت است، اما امروز می خواهم در مورد چیز دیگری صحبت کنم.
من روش جالب دیگری برای پاسخگویی به جدول پیدا کردم. این شامل استفاده از ویژگی های داده و شبه کلاس ها است. حالا همه چیز را به شما نشان خواهم داد.

روش دوم سازگاری

ابتدا بیایید نشانه گذاری را تغییر دهیم:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

سرویس شرح قیمت تخفیف چیدمان موبایل طرح بندی برای گوشی ها $3000 50% فرود بر روی CMS WordPress ساخت وب سایت با ادمین پانل $3000 30%

به هر ستون یک ویژگی اختصاص داد برچسب داده، که در آینده برای ما مفید خواهد بود.

استایل های اساسی را تنظیم کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

بدنه (تراز متن: مرکز؛ padding-top: 10%؛ font-family: sans-serif; background-image: url ("bg.jpg")؛ اندازه پس زمینه: جلد؛ ارتفاع: 100vh؛ رنگ: #fff ; ) .table-wrap ( text-align : center ; display : inline-block; background-color : #fff ; padding : 2rem 2rem; color : #000 ; ) جدول (حاشیه: 1px جامد #ccc ؛ عرض: 100% ؛ حاشیه : 0 ؛ بالشتک : 0 ؛ حاشیه : جمع کردن ؛ فاصله حاشیه : 0 ؛ ) جدول tr (حاشیه : 1px جامد #ddd ؛ padding : 5px ; ) جدول th, جدول td ( padding : 10px ; : مرکز ؛ حاشیه سمت راست : 1px جامد #ddd ؛ ) جدول th ( رنگ : #fff ؛ پس زمینه رنگ : #444 ؛ تبدیل متن : بزرگ ؛ اندازه فونت : 14 پیکسل ؛ فاصله حروف : 1 پیکسل ؛ )

بدنه (تراز نوشتاری: مرکز؛ بالشتک: 10%؛ فونت-خانواده: sans-serif؛ تصویر پس‌زمینه: url("bg.jpg")؛ اندازه پس‌زمینه: جلد؛ ارتفاع: 100 ولت؛ رنگ: #fff ; ) .table-wrap ( تراز نوشتاری: مرکز؛ نمایشگر: بلوک درون خطی؛ رنگ پس‌زمینه: #fff؛ بالشتک: 2rem 2rem؛ رنگ: #000؛ ) جدول (حاشیه: 1px جامد #cccc؛ عرض: 100% ؛ حاشیه: 0؛ بالشتک: 0؛ حاشیه: جمع کردن؛ فاصله حاشیه: 0؛ ) جدول tr (حاشیه: 1px جامد #ddd؛ بالشتک: 5px؛ ) جدول th, جدول td ( بالشتک: 10px؛ تراز متن : مرکز؛ حاشیه-راست: 1px جامد #ddd؛ ) جدول th (رنگ: #fff؛ رنگ پس‌زمینه: #444؛ تبدیل متن: بزرگ؛ اندازه قلم: 14 پیکسل؛ فاصله حروف: 1px؛ )

به نظر یک جدول معمولی است، طبیعتاً با جابجایی سایت به اندازه 320-420 پیکسل، یک اسکرول افقی از کل سایت را خواهیم دید. نکته نیست.

چطوری میشه اینو تعمیر کرد؟ اضافه کردن سبک ها:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) (جدول (حاشیه : 0 ؛ ) جدول جدول (نمایش: هیچکدام؛ ) جدول tr (حاشیه-پایین: 10 پیکسل؛ نمایش: بلوک؛ حاشیه-پایین: 2 پیکسل جامد #ddd؛ ) جدول td (نمایش: بلوک؛ تراز متن: راست ؛ اندازه قلم: 13 پیکسل؛ حاشیه پایین: 1 پیکسل نقطه‌دار #cccc؛ حاشیه سمت راست: 1 پیکسل شفاف شفاف برچسب)؛ شناور: چپ؛ تبدیل متن: بزرگ؛ وزن قلم: پررنگ؛ ))

صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) ( جدول (حاشیه: 0; ) جدول (نمایش: هیچکدام؛ ) جدول tr ( حاشیه-پایین: 10 پیکسل؛ نمایش: بلوک؛ حاشیه-پایین: 2 پیکسل جامد #ddd؛ ) جدول td (نمایش: بلوک؛ تراز نوشتاری: راست؛ اندازه قلم: 13 پیکسل؛ حاشیه پایین: 1 پیکسل نقطه‌دار #cccc؛ حاشیه سمت راست: 1 پیکسل شفاف شفاف؛ ) جدول td:آخرین فرزند (حاشیه پایین: 0; ) جدول td:before ( محتوا: attr(برچسب داده)؛ شناور: چپ؛ تبدیل متن: بزرگ؛ وزن فونت: پررنگ؛ ))

در اینجا ردیف‌های جدول را بلوک‌مانند کردیم، نام ستون‌ها را حذف کردیم و متن خود ستون‌ها را در سمت راست تراز کردیم. به نوبه خود، با استفاده از شبه کلاس :قبل ازما ویژگی های تاریخ خود را به حاشیه سمت چپ اضافه می کنیم. اینطور معلوم می شود:

اینم یک قلم دیگر:

همانطور که می بینید، ما ردیف های جدول را به یک بلوک کوچک تبدیل کردیم که حاوی تمام اطلاعات است. فکر می کنم این گزینه سازگاری میز برای میزهای کوچک مناسب است. از آن لذت ببرید، دوستان!

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

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

نسخه ی نمایشی جدول پاسخگو .

نشانه گذاری HTML

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

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

سبک های CSS

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

دیو (
سرریز-x: خودکار;
)

بیایید بقیه تگ های جدول را استایل کنیم:

جدول (
border-collapse: فرو ریختن; /* نمایش تنها خطوط تک */
فاصله مرزی: 0; /* فاصله بین سلول ها */
عرض: 100%؛
حاشیه: 1px جامد #afb42b;
رنگ: #212121;
}

Th, td (
text-align: left;
padding: 8px;
}

استایل تگ tr(ردیف) سزاوار یک نظر جداگانه است. در حال حاضر برای ردیف های جدول به صورت راه راه (گورخر) تبدیل شده است. برای این کار از شبه کلاس استفاده می شود : فرزند نهمبا معنی داخل پرانتز زوج. معنی زوج، خصوصیات را به همه عناصر زوج اختصاص می دهد، در مورد ما این رنگ پس زمینه است. بنابراین، جدول راه راه خواهد بود.

پنجره ها: Internet Explorer 10.0+، Firefox 1.5+، Google Chrome، Opera 9.5+، Safari 3.1+، SeaMonkey 1.0+ [1].

لینوکس: Firefox 1.5+، Google Chrome / Chromium، Opera 9.5+، SeaMonkey 1.0+ [2].

اگر یک جدول HTML حاوی داده های بیش از حد باشد، از فضای موجود در صفحه گسترده تر می شود و شروع به سرریز شدن می کند. برای رفع این وضعیت، می توانید اسکرول افقی را به جدول اضافه کنید. مثال:

1	2	3	4	5	6	7	8	9	10
جدول_داده_1	جدول_داده_2	جدول_داده_3	جدول_داده_4	جدول_داده_5	جدول_داده_6	جدول_داده_7	جدول_داده_8	جدول_داده_9	جدول_داده_10

HTML/XHTML. کد:

<جدول>

<tr>

<هفتم>1</th>

<هفتم>2</th>

<هفتم>3</th>

<هفتم>4</th>

<هفتم>5</th>

<هفتم>6</th>

<هفتم>7</th>

<هفتم>8</th>

<هفتم>9</th>

<هفتم>10</th>

</tr>

<tr>

<td>داده_جدول_1</td>

<td>داده_جدول_2</td>

<td>داده_جدول_3</td>

<td>داده_جدول_4</td>

<td>داده_جدول_5</td>

<td>داده_جدول_6</td>

<td>داده_جدول_7</td>

<td>داده_جدول_8</td>

<td>داده_جدول_9</td>

<td>داده_جدول_10</td>

</tr>

</ جدول>

جدول(نمایش: بلوک؛ سرریز-x: خودکار؛)

/* CSS اضافی، فقط برای مثال ظاهری: */

جدول(فروپاشی مرز: فروریختن؛)

جدول td,th(بالشتک: 10 پیکسل؛ حاشیه: 1 پیکسل #000 جامد؛)

توجه داشته باشید: ویژگی CSS نمایش: مسدود کردنباعث می شود که جدول فقط به اندازه ای که نیاز دارد پهنای داشته باشد تا داده ها را بدون اعوجاج بصری در خود جای دهد. دیگر، بدون کشش در کل عرض فضای موجود در صفحه. حتی اگر کد CSS اضافه شود عرض: 100%. مثال:

1	2	3
جدول_داده_1	جدول_داده_2	جدول_داده_3

زیرمجموعه های متفاوت و تم

خدمات آنلاین زیادی برای ایجاد sitemap.xml وجود دارد. با این حال، می‌توانید این کار را خودتان روی رایانه‌تان با استفاده از مرورگر lynx و چندین ابزار خط فرمان لینوکس انجام دهید. نمونه زیر نمونه ای از اسکریپت bash به نام "sitemap.sh" است که از آنها استفاده می کند. اسکریپت Bash که فایل sitemap.xml را ایجاد می کند: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\ \.//g" | مرتب سازی | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap. xml sed -i "s/"/\&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/ sitemap/sitemap.xml sed -i "s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s//" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "s/$/<\/loc><\/url>/" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "1 i\r\r \r\r\r\r" /home/me/sitemap/sitemap/sitemap.xml sed -i -e "$ a \\r"" /home/me/sitemap/sitemap/sitemap.xml sed -i "/static/d" /home/me/sitemap/sitemap/sitemap.xml echo "...انجام شد" پس از آماده شدن فایل اسکریپت bash: "chmod +x sitemap.sh" تا قابل اجرا شود. sitemap.sh را در آرشیو دانلود کنید sitemap.sh.tar.gz (پس از دانلود و باز کردن آرشیو، http://www.compmiscellanea را در فایل .com/ با نام دامنه مورد نظر سایت با "www" و جایگزین http://compmiscellanea.com/ با نام دامنه مورد نظر سایت بدون "www" به جای "static" در خط آخر فایل، خطی را قرار دهید که پیوندها باید حاوی، به طوری که از لیست حذف شده باشند. سپس "chmod +x sitemap.sh" سپس sitemap.sh را اجرا کنید. نظرات دانلود sitemap2.sh با نظرات خط به خط در sitemap2.sh. بایگانی tar.gz. قبل از اجرای اسکریپت bash، باید سه پوشه ایجاد کنید. از آنجایی که مرورگر lynx در برخی موارد ممکن است برخی از پیوندها را از دست بدهد، اگر نام دامنه سایت با یا بدون "www" مشخص شود، اسکریپت bash دو بار lynx را اجرا می کند. پردازش سایت با نام دامنه با "www" و پردازش سایت با استفاده از نام دامنه بدون "www". دو فایل به دست آمده در دو پوشه مختلف قرار می گیرند، در اینجا آنها "/home/me/sitemap/www/" و "/home/me/sitemap/www2/" هستند. و دایرکتوری "/home/me/sitemap/sitemap/" برای sitemap.xml ایجاد شده در نظر گرفته شده است. 1. مسیر bash #!/bin/bash 2. به پوشه بروید - مرورگر lynx فایل های دریافتی را هنگام پردازش سایت با نام دامنه با "www" cd /home/me/sitemap/www/ در آنجا قرار می دهد.

هیچ خاصیت "float: bottom" در CSS وجود ندارد، اما می توان به چندین روش دیگر به این افکت دست یافت. مثال: Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. پیوند 1 پیوند 2 پیوند 3 HTML / XHTML پایین شناور. کد:

CSS. کد: .box1 (موقعیت: نسبی؛ بالا: 0px؛ سمت چپ: 0px؛ شناور: چپ؛ ارتفاع: خودکار؛ عرض: 100%؛) .content1 (موقعیت: نسبی؛ بالا: 0px؛ سمت چپ: 0px؛ شناور: سمت چپ؛ ارتفاع: خودکار؛ عرض: 100%؛) .left1 (موقعیت: نسبی؛ بالا: 0px؛ سمت چپ: 0px؛ شناور: چپ؛ ارتفاع: خودکار؛ عرض: 64%؛) .menu1 (موقعیت: نسبی؛ بالا: 0px؛ چپ: 0 پیکسل؛ شناور: چپ؛ ارتفاع: خودکار؛ عرض: 36 درصد؛) .bottom1 (موقعیت: مطلق؛ پایین: 0 پیکسل؛ سمت راست: 0 پیکسل؛) /* CSS اضافی، فقط برای مثال ظاهری */ . box1 (رنگ: #ddd؛ تراز نوشتاری: مرکز؛).content1 (پس‌زمینه: #bbb;). چپ ۱ (ارتفاع دقیقه: 100 پیکسل؛ بالشتک: 2%؛ تراز متن: توجیه؛ پس‌زمینه: #006؛ -moz - box-sizing: border-box؛ -webkit-box-sizing: border-box؛ -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (padding: 2%؛ float: right ؛ پس زمینه: #060؛ -moz-box-sizing: border-box؛ -webkit-box-sizing: border-box؛ -ms-box-sizing: border-box؛ box-sizing: border-box;) . menu1 p (موقعیت: نسبی؛ بالا: 0px؛ سمت چپ: 0px؛ شناور: چپ؛ ارتفاع: خودکار؛ عرض: 100%؛ padding: 0px; حاشیه: 0px;).menu1 a (رنگ: #ddd؛ متن-تزیین: هیچ؛). menu1 a:Hover (متن-تزیین: زیر خط؛).bottom1 (بالشتک: 2%؛ رنگ: #eee؛ پس‌زمینه: # 600;) تمام محتوای صفحه وب در ظرف جعبه 1 موجود است. داخل آن دو ظرف div قرار دارد: 1. content1 با محتوای واقعی در سمت چپ و یک منو در سمت راست. 2. bottom1 بعد از content1.

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

سازندگان وب سایت بیش از یک راه برای این کار ارائه کرده اند. با استفاده از CSS و جاوا اسکریپت می‌توانید سلول‌ها را روی صفحه‌های کوچک در یک ستون مرتب کنید، می‌توانید ستون‌هایی را با داده‌های نه چندان مهم پنهان کنید و حتی یک جدول را به نمودار دایره‌ای تبدیل کنید. همه این روش ها بیش از یک بار به دو زبان انگلیسی و روسی توضیح داده شده است و شما می توانید به راحتی در مورد آنها در اینترنت مطالعه کنید. در مقاله خود، من می خواهم در مورد چگونگی انتخاب راه حل مورد نیاز خود و به طور خاص برای سایت خود صحبت کنم.

قبل از انتخاب روش مناسب، باید چند سوال در رابطه با محتوای جدول از خود بپرسید.

آیا مردم داده ها را در ستون ها یا ردیف ها مقایسه می کنند؟

مثال 1: مردم داده ها را با هم مقایسه نمی کنند.

ابتدا، بیایید به یک جدول مثال نگاه کنیم که در آن کاربران مجبور به مقایسه داده ها نیستند. نمونه ای از چنین جدولی لیستی از فیلم ها است. در این جدول، فیلم ها بر اساس رتبه بندی مرتب شده اند.

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

این دقیقا همان کاری است که سازندگان سایت JQuery Mobile انجام دادند.

مثال 2: افراد داده های ردیف یا ستون را مقایسه می کنند

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

برنج. 3. جدول با داده هایی که باید مقایسه شوند

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

برنج. 4. جدول با داده ها بر روی صفحه نمایش تلفن همراه

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

برنج. 5. جدول با داده ها در نسخه کامل سایت

برنج. 6 و 7. همین جدول در نسخه موبایل. فقط مهمترین ستون ها باقی می مانند، اما در صورت لزوم می توانید بقیه ستون ها را نیز اضافه کنید.

چه اطلاعاتی مهم است؟

اگر تصمیم دارید برخی از اطلاعات را در صفحه نمایش های کوچک مخفی کنید، به طور طبیعی این سوال پیش می آید: چه اطلاعاتی مهم است؟ در چنین شرایطی ممکن است مفید باشد که سوالات زیر را از خود بپرسید:

• مردم بیشتر به چه اطلاعاتی نیاز دارند؟
• کدام ستون ها برای درک اطلاعاتی که جدول ارائه می دهد مهم ترین هستند؟
• مردم بیشتر به چه سخنرانانی نیاز دارند؟

آیا کاربران قادر خواهند بود قسمتی از جدول را از قسمت دیگر تشخیص دهند؟

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

در نسخه کامل سایت می توانیم هر چیزی را که می خواهیم در جدول قرار دهیم. اما برای نسخه موبایل لازم است که لازم ترین اطلاعات را بگذارید و مطمئن باشید که کاربر یک داده را با داده دیگر اشتباه نمی گیرد.

آیا همه چیز باید به یکباره روی صفحه باشد یا می توان در صورت نیاز عناصر اضافی را اضافه کرد؟

سخت‌ترین کار برای ایجاد جداول واکنش‌گرا معمولاً زمانی است که توسعه‌دهنده سایت سعی می‌کند هر چیزی را که در یک صفحه بزرگ وجود دارد را روی یک صفحه کوچک قرار دهد. در پیچیده ترین موارد، این باعث ایجاد مشکلات عمده در نمایش جدول می شود.

بسیاری از مردم این اشتباه را مرتکب می شوند که فکر می کنند طراحی واکنش گرا یعنی نمایش همه چیز در صفحه، صرف نظر از اندازه صفحه نمایش. در واقع، بهتر است فقط مهم‌ترین چیزها را روی یک صفحه باریک قرار دهید و بقیه را با بزرگ‌نمایی اضافه کنید.

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

بنابراین، وقتی صحبت از جداول در طراحی واکنش گرا می شود، چه اهمیتی دارد؟

• آیا کاربران معنای جدول را حتی در صورت تغییر ظاهر آن درک خواهند کرد؟
• آیا آنها به نحوی می توانند تمام اطلاعات موجود در جدول را به دست آورند؟
• آیا مطمئن هستید که همه URL ها بدون در نظر گرفتن دستگاه قابل دسترسی هستند؟

اگر بتوانید به هر سه سوال "بله" پاسخ دهید، پس هیچ مشکلی با جداول در سایت شما وجود ندارد.

محتوای شما به شما می گوید که بهترین کار را با جداول خود چه کنید.

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

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