.

அட்டவணைகள் தீயவை என்பது எந்த தளவமைப்பு வடிவமைப்பாளருக்கும் இரகசியமல்ல. அவற்றை மாற்றியமைப்பது மற்றும் தனிப்பயனாக்குவது கடினம். தளத்தின் டெஸ்க்டாப் பதிப்பில் ஒரு அட்டவணையை உருவாக்குவது இன்னும் எளிதானது என்றால், தகவமைப்பு தளவமைப்பு தொடங்கும் போது, ​​எல்லாம் நரகத்திற்குச் செல்லும்.

உண்மையில், பயனுள்ள விருப்பங்களில் ஒன்று அட்டவணைக்கு ஒரு கிடைமட்ட உருளை உருவாக்குவதாகும். இதைச் செய்வது கடினம் அல்ல, ஆனால் இன்றைய இடுகை அதைப் பற்றியது அல்ல. இருப்பினும், நான் அதை உங்களுக்குக் காட்டுகிறேன்.

முதல் தழுவல் முறை

<div class = "table-wrap" > <அட்டவணை > <thead > <tr > <வது >சேவை</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 (text-align: centre; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) .table-wrap (overflow-y: scroll; ) )

டேபிள்-ராப் (உரை-சீரமைப்பு: மையம்; காட்சி: இன்லைன்-பிளாக்; பின்னணி-நிறம்: #fff; திணிப்பு: 2rem 2rem; நிறம்: #000; ) @ ஊடகத் திரை மற்றும் (அதிகபட்ச அகலம்: 600px) ( .table-wrap ( overflow-y: scroll; ) )

இதன் விளைவாக, 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

உடல் (text-align: centre ; padding-top: 10% ; font-family: sans-serif ; background-image: url ("bg.jpg") ; பின்னணி அளவு: கவர்; உயரம்: 100vh; நிறம்: #fff ; ) .table-wrap (text-align: centre; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) table ( border: 1px solid #ccc ; width: 100% விளிம்பு: 0; திணிப்பு: 0; எல்லை-சரிவு: சரிவு; எல்லை-இடைவெளி: 0;) அட்டவணை tr (எல்லை: 1px திட #ddd; திணிப்பு: 5px; ) அட்டவணை வது, அட்டவணை td (திணிப்பு: 10px ; உரை-சீரமைப்பு : மையம்; எல்லை-வலது: 1px திட #ddd; ) அட்டவணை வது (நிறம்: #fff; பின்னணி-நிறம்: #444; உரை-மாற்றம்: பெரிய எழுத்து; எழுத்துரு அளவு: 14px; எழுத்து இடைவெளி: 1px; )

உடல் ( text-align: centre; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); பின்னணி அளவு: கவர்; உயரம்: 100vh; நிறம்: #fff ; ) .table-wrap ( text-align: centre; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) அட்டவணை (எல்லை: 1px திட #ccc; அகலம்: 100% ; விளிம்பு:0; திணிப்பு:0; கரை-சரிவு: சரிவு; எல்லை-இடைவெளி: 0; ) அட்டவணை tr (எல்லை: 1px திட #ddd; திணிப்பு: 5px; ) அட்டவணை வது, அட்டவணை td (திணிப்பு: 10px; உரை-சீரமைப்பு : மையம்; பார்டர்-வலது: 1px திடமான #ddd; ) அட்டவணை வது (நிறம்: #fff; பின்னணி-நிறம்: #444; உரை-மாற்றம்: பெரிய எழுத்து; எழுத்துரு அளவு: 14px; எழுத்து இடைவெளி: 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

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 600px) (அட்டவணை (எல்லை: 0;) டேபிள் திஅட் (காட்சி: எதுவுமில்லை;) டேபிள் டிஆர் (விளிம்பு-கீழ்: 10px; காட்சி: தொகுதி; எல்லை-கீழ்: 2px திட #ddd; ) அட்டவணை td (காட்சி: தொகுதி ; உரை-சீரமைப்பு: வலதுபுறம் ; எழுத்துரு அளவு: 13px; எல்லை-கீழ்: 1px புள்ளியிடப்பட்ட #ccc; எல்லை-வலது: 1px திட வெளிப்படையான லேபிள்) ; மிதவை : இடது ; உரை மாற்றம் : பெரிய எழுத்து ; எழுத்துரு எடை : தடிமனான

@மீடியா திரை மற்றும் (அதிகபட்ச அகலம்: 600px) (அட்டவணை (எல்லை: 0; ) டேபிள் திட் (காட்சி: எதுவுமில்லை; ) டேபிள் டிஆர் ( விளிம்பு-கீழ்: 10px; காட்சி: தொகுதி; எல்லை-கீழ்: 2px திட #ddd; ) அட்டவணை td (காட்சி: தொகுதி; உரை-சீரமைப்பு: வலது; எழுத்துரு அளவு: 13px; எல்லை-கீழ்: 1px புள்ளியிடப்பட்ட #ccc; எல்லை-வலது: 1px திட வெளிப்படையானது; ) அட்டவணை td: கடைசி குழந்தை (எல்லை-கீழ்: 0; ) அட்டவணை td:முன் (உள்ளடக்கம்: attr(data-label); மிதவை: இடது; உரை-மாற்றம்: பெரிய எழுத்து; எழுத்துரு-எடை: தடிமன்; ) )

இங்கே நாங்கள் அட்டவணை வரிசைகளை பிளாக் போல் செய்து, நெடுவரிசை பெயர்களை அகற்றி, நெடுவரிசைகளின் உரையை வலதுபுறமாக சீரமைத்தோம். இதையொட்டி, போலி வர்க்கத்தைப் பயன்படுத்தி : முன்எங்கள் தேதி பண்புகளை இடது விளிம்பில் இணைக்கிறோம். இது இப்படி மாறிவிடும்:

இதோ மற்றொரு பேனா:

நீங்கள் பார்க்க முடியும் என, அட்டவணை வரிசைகளை அனைத்து தகவல்களையும் கொண்ட ஒரு சிறிய தொகுதியாக மாற்றினோம். இந்த டேபிள் அடாப்டபிளிட்டி ஆப்ஷன் சிறிய டேபிள்களுக்கு ஏற்றது என்று நினைக்கிறேன். மகிழுங்கள் நண்பர்களே!

அட்டவணைகள் வெவ்வேறு திரைத் தீர்மானங்களுக்கு ஏற்றவாறு மாற்றியமைக்க முடிந்தால், மனிதகுலம் இன்றுவரை அட்டவணை அமைப்பை உருவாக்கிக்கொண்டிருக்கும். நான் இன்னும் அந்த நேரத்தைக் கண்டுபிடித்தேன், நான் எதைப் பற்றி பேசுகிறேன் என்று எனக்குத் தெரியும்.

இருப்பினும், நாங்கள் வேறு நேரத்தில் வாழ்கிறோம், அட்டவணை தளவமைப்பு மறதிக்குள் மூழ்கிவிட்டது, ஆனால் வலைத்தளங்களில் கிளாசிக் அட்டவணைகளைப் பயன்படுத்த வேண்டிய அவசியம் இன்னும் உள்ளது. எனவே, அட்டவணைகள் இருப்பதை நாங்கள் மறுக்க மாட்டோம், மாறாக எளிமையான முறையைப் பற்றி அறிந்து கொள்ளுங்கள், ஒரு அட்டவணையை எவ்வாறு பதிலளிக்க வேண்டும்.

பதிலளிக்கக்கூடிய அட்டவணை டெமோ .

HTML மார்க்அப்

நாங்கள் எளிமையான ஒன்றை உருவாக்கினோம் HTMLஅட்டவணை, அது திரையில் பொருந்தும் வரை, எல்லாம் சரியாக இருக்கும். திரையின் அகலம் குறைக்கப்படும்போது, ​​​​அட்டவணை துண்டிக்கப்படும், அதன் தரவை நாம் பார்க்க மாட்டோம், அல்லது அது மிகச் சிறியதாகிவிடும், மீண்டும் எதையும் பார்க்க மாட்டோம்.

டேக்கில் டேபிளை நான் வைத்ததை நீங்கள் கவனித்திருக்கலாம் divமற்றும் வெளிப்படையாக ஒரு காரணத்திற்காக. குறிச்சொல் தானே divநாங்கள் பாணிகளை ஒதுக்கும் வரை எதையும் கொடுக்காது.

CSS பாணிகள்

ஒரே ஒரு சொத்தை அமைப்பதன் மூலம், அட்டவணை மாற்றியமைக்கிறது, குறிச்சொல்லின் உள்ளே உள்ளடக்கம் இருக்கும்போது கிடைமட்ட உருள்ப்பட்டி தானாகவே தோன்றும் divஅச்சில் உள்ள தற்போதைய திரை அகலத்திற்கு இனி பொருந்தாது எக்ஸ்.

பிரிவு (
overflow-x: ஆட்டோ;
)

மீதமுள்ள அட்டவணை குறிச்சொற்களை ஸ்டைல் ​​செய்வோம்:

மேசை (
எல்லை-சரிவு: சரிவு; /* ஒற்றை வரிகளை மட்டும் காட்டு */
எல்லை இடைவெளி: 0; /* செல்களுக்கு இடையே உள்ள தூரம் */
அகலம்: 100%;
கரை: 1px திட #afb42b;
நிறம்: #212121;
}

தி, டிடி (
text-align: இடது;
திணிப்பு: 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</வது>

<வது>2</வது>

<வது>3</வது>

<வது>4</வது>

<வது>5</வது>

<வது>6</வது>

<வது>7</வது>

<வது>8</வது>

<வது>9</வது>

<வது>10</வது>

</tr>

<tr>

<td>அட்டவணை_தரவு_1</டி.டி>

<td>அட்டவணை_தரவு_2</டி.டி>

<td>அட்டவணை_தரவு_3</டி.டி>

<td>அட்டவணை_தரவு_4</டி.டி>

<td>அட்டவணை_தரவு_5</டி.டி>

<td>அட்டவணை_தரவு_6</டி.டி>

<td>அட்டவணை_தரவு_7</டி.டி>

<td>அட்டவணை_தரவு_8</டி.டி>

<td>அட்டவணை_தரவு_9</டி.டி>

<td>அட்டவணை_தரவு_10</டி.டி>

</tr>

</ மேசை>

மேசை(காட்சி: தொகுதி; வழிதல்-x: ஆட்டோ;)

/* கூடுதல் CSS, உதாரணத்திற்கு சில தோற்றத்தை கொடுக்க: */

மேசை(எல்லை சரிவு: சரிவு;)

அட்டவணை td,th(திணிப்பு: 10px; கரை: 1px #000 திடம்;)

குறிப்பு: CSS சொத்து காட்சி: தொகுதிகாட்சி சிதைவு இல்லாமல் தரவுக்கு இடமளிக்கும் வகையில் அட்டவணை எவ்வளவு அகலத்தை மட்டுமே எடுத்துக்கொள்கிறது. இனி, பக்கத்தில் இருக்கும் இடத்தின் முழு அகலத்தையும் நீட்டாமல். CSS குறியீடு சேர்க்கப்பட்டாலும் அகலம்: 100%. உதாரணமாக:

1	2	3
அட்டவணை_தரவு_1	அட்டவணை_தரவு_2	அட்டவணை_தரவு_3

அலியோஸ்க் சப்டிடோக்கள் மற்றும் தீம்

sitemap.xml ஐ உருவாக்க பல ஆன்லைன் சேவைகள் உள்ளன. இருப்பினும், லின்க்ஸ் உலாவி மற்றும் பல லினக்ஸ் கட்டளை வரி பயன்பாடுகளைப் பயன்படுத்தி உங்கள் கணினியில் அதை நீங்களே செய்யலாம். அவற்றைப் பயன்படுத்தும் "sitemap.sh" என்ற பாஷ் ஸ்கிரிப்ட்டின் உதாரணம் கீழே உள்ளது. 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 எதிரொலி "...முடிந்தது" பாஷ் ஸ்கிரிப்ட் கோப்பு தயாரான பிறகு: "chmod +x sitemap.sh" அதை இயக்கக்கூடியதாக மாற்றவும். sitemap.sh ஐப் பதிவிறக்கவும் sitemap.sh.tar.gz (காப்பகம் பதிவிறக்கம் செய்யப்பட்டு, துண்டிக்கப்பட்ட பிறகு, .com/ கோப்பில் http://www.compmiscellanea ஐ மாற்றவும். தளத்தின் விரும்பிய டொமைன் பெயரை "www" எனக் கொண்டு, http://compmiscellanea.com/ ஐ "www" இல்லாமல் தளத்தின் விரும்பிய டொமைன் பெயருடன் மாற்றவும். கோப்பின் கடைசி வரியில் "static" என்பதற்குப் பதிலாக, அந்த வரியை வைக்கவும். இணைப்புகள் இருக்க வேண்டும், அதனால் அவை பட்டியலில் இருந்து அகற்றப்படும். பின்னர் "chmod +x sitemap.sh". பின்னர் sitemap.sh ஐ இயக்கவும். கருத்துகள் sitemap2.sh இல் வரிக்கு வரி கருத்துகளுடன் sitemap2.sh ஐப் பதிவிறக்கவும். tar.gz காப்பகம். பாஷ் ஸ்கிரிப்டை இயக்குவதற்கு முன், நீங்கள் மூன்று கோப்புறைகளை உருவாக்க வேண்டும். தளத்தின் டொமைன் பெயர் "www" உடன் அல்லது இல்லாமல் குறிப்பிடப்பட்டால், சில சந்தர்ப்பங்களில் லின்க்ஸ் உலாவி சில இணைப்புகளைத் தவறவிடக்கூடும் என்பதால், பாஷ் ஸ்கிரிப்ட் லின்க்ஸை இரண்டு முறை இயக்குகிறது, "www" உடன் டொமைன் பெயர் மூலம் தளத்தை செயலாக்குதல் மற்றும் "www" இல்லாமல் ஒரு டொமைன் பெயரைப் பயன்படுத்தி தளத்தை செயலாக்குதல். இதன் விளைவாக இரண்டு கோப்புகள் இரண்டு வெவ்வேறு கோப்புறைகளில் வைக்கப்படுகின்றன, இங்கே அவை "/home/me/sitemap/www/" மற்றும் "/home/me/sitemap/www2/" ஆகும். மேலும் "/home/me/sitemap/sitemap/" கோப்பகம் உருவாக்கப்பட்ட sitemap.xmlக்காக வடிவமைக்கப்பட்டது. 1. பாஷ் #!/பின்/பாஷுக்கான பாதை 2. கோப்புறைக்குச் செல்லவும் - "www" cd /home/me/sitemap/www/ 3 உடன் டொமைன் பெயரில் தளத்தைச் செயலாக்கும்போது பெறப்பட்ட கோப்புகளை லின்க்ஸ் உலாவி அங்கு வைக்கும்.

CSS இல் "float: bottom" பண்பு இல்லை, ஆனால் பல வழிகளில் விளைவை அடைய முடியும். உதாரணம்: லோரெம் இப்சம் டோலர் சிட் அமெட், கன்செக்டெர் அடிபிசிசிங் எலிட், செட் டூ ஈயுஸ்மோட் டெம்போர் யுட் லேபர் மற்றும் டோலோர் மேக்னா அலிக்வா. 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. எக்செப்டியூர் சின்ட் ஓகேகாட் குபிடாடட் நோன் ப்ரோடென்ட், சன்ட் இன் கல்பா குய் ஆஃபிசியா டெஸரண்ட் மோலிட் அனிம் ஐடி எஸ்ட் லேபர். இணைப்பு 1 இணைப்பு 2 இணைப்பு 3 ஃப்ளோட் கீழே HTML / XHTML. குறியீடு:

CSS. குறியீடு: .box1 (நிலை: உறவினர்; மேல்: 0px; இடது: 0px; மிதவை: இடது; உயரம்: தானியங்கு; அகலம்: 100%;) .content1 (நிலை: உறவினர்; மேல்: 0px; இடது: 0px; மிதவை: இடது; உயரம்: தானியங்கு; அகலம்: 100%;) .இடது1 (நிலை: உறவினர்; மேல்: 0px; இடது: 0px; மிதவை: இடது; உயரம்: தானியங்கு; அகலம்: 64%;) .menu1 (நிலை: உறவினர்; மேல்: 0px; இடது: 0px; மிதவை: இடது; உயரம்: தானியங்கு; அகலம்: 36%;) .bottom1 (நிலை: முழுமையான; கீழே: 0px; வலது: 0px;) /* கூடுதல் CSS, உதாரணத்திற்கு சில தோற்றத்தைக் கொடுக்க மட்டுமே */ . box1 (color: #ddd; text-align: centre;).content1 (பின்னணி: #bbb;).left1 (min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz - box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;).menu1 (பேடிங்: 2%; மிதவை: வலதுபுறம் பின்னணி: #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%; திணிப்பு: 0px; விளிம்பு: 0px;).menu1 a (color: #ddd; text-decoration: none;).menu1 a:hover (text-decoration: underline;).bottom1 (padding: 2%; color: #eee; background: # 600;) வலைப்பக்கத்தின் அனைத்து உள்ளடக்கமும் box1 கொள்கலனில் உள்ளது. அதன் உள்ளே இரண்டு div கொள்கலன்கள் உள்ளன: 1. உள்ளடக்கம்1 இடதுபுறத்தில் உண்மையான உள்ளடக்கம் மற்றும் வலதுபுறத்தில் ஒரு மெனு. 2. உள்ளடக்கம்1க்குப் பிறகு கீழே1.

நீங்கள் எப்போதாவது மொபைல் சாதனங்களுக்கு ஏற்ற தளத்தை உருவாக்க முயற்சித்திருந்தால் அல்லது டெஸ்க்டாப் தளத்தை பதிலளிக்கக்கூடியதாக மாற்ற முயற்சித்திருந்தால், அத்தகைய தளவமைப்பில் உள்ள மிகப்பெரிய பிரச்சனைகளில் ஒன்று அட்டவணைகளின் சரியான காட்சி என்பதை நீங்கள் அறிந்திருக்கலாம். பொதுவாக, அட்டவணைகள் சிறிய திரைகளுடன் சரியாக பொருந்தாது, எனவே, உங்கள் தளம் அவை இல்லாமல் செய்ய முடியாவிட்டால், பயனருக்கு வசதியாக அவற்றைக் காண்பிப்பதற்கான வழியை நீங்கள் கண்டுபிடிக்க வேண்டும்.

இணையதள படைப்பாளிகள் இதைச் செய்வதற்கு ஒன்றுக்கு மேற்பட்ட வழிகளைக் கண்டுபிடித்துள்ளனர். CSS மற்றும் JavaScript ஐப் பயன்படுத்தி, நீங்கள் ஒரு நெடுவரிசையில் சிறிய திரைகளில் கலங்களை ஏற்பாடு செய்யலாம், மிக முக்கியமான தரவு இல்லாத நெடுவரிசைகளை மறைக்கலாம், மேலும் ஒரு அட்டவணையை பை விளக்கப்படமாக மாற்றலாம். இந்த முறைகள் அனைத்தும் ஆங்கிலம் மற்றும் ரஷ்ய மொழிகளில் ஒன்றுக்கு மேற்பட்ட முறை விவரிக்கப்பட்டுள்ளன, மேலும் அவற்றைப் பற்றி இணையத்தில் எளிதாகப் படிக்கலாம். எனது கட்டுரையில், இந்த தீர்வுகளிலிருந்து உங்களுக்குத் தேவையான மற்றும் குறிப்பாக உங்கள் தளத்திற்கு எப்படித் தேர்வு செய்வது என்பது பற்றிப் பேச விரும்புகிறேன்.

சரியான முறையைத் தேர்ந்தெடுப்பதற்கு முன், அட்டவணையில் உள்ள உள்ளடக்கத்தைப் பற்றி சில கேள்விகளை நீங்களே கேட்டுக்கொள்ள வேண்டும்.

நெடுவரிசைகள் அல்லது வரிசைகளில் உள்ள தரவை மக்கள் ஒப்பிடுவார்களா?

எடுத்துக்காட்டு 1: மக்கள் தரவை ஒப்பிட மாட்டார்கள்.

முதலில், பயனர்கள் தரவை ஒப்பிட வேண்டிய அவசியமில்லாத உதாரண அட்டவணையைப் பார்ப்போம். அத்தகைய அட்டவணையின் உதாரணம் படங்களின் பட்டியல். இந்த அட்டவணையில், திரைப்படங்கள் மதிப்பீட்டின் படி வரிசைப்படுத்தப்பட்டுள்ளன.

இந்தத் தரவை ஒரு பெரிய திரையில் அட்டவணை வடிவத்தில் பார்ப்பது வசதியானது, ஆனால் ஒரு இயக்குனருடன் மற்றொரு இயக்குனரை ஒப்பிட்டுப் பார்ப்பது எவருக்கும் இன்றியமையாதது. எனவே, சிறிய திரைகளில் உள்ள இந்த அட்டவணையின் நெடுவரிசைகளை பாதுகாப்பாக ஒன்றாக மாற்றலாம்.

JQuery Mobile தளத்தை உருவாக்கியவர்கள் இதைத்தான் செய்தார்கள்.

எடுத்துக்காட்டு 2: மக்கள் வரிசை அல்லது நெடுவரிசை தரவை ஒப்பிடுவார்கள்

உங்கள் அட்டவணையில், எடுத்துக்காட்டாக, வெவ்வேறு நிறுவனங்களுக்கான ஒரே மாதிரியான தரவுகளின் பட்டியல் இருந்தால், பயனர் தனக்கான சிறந்த விருப்பத்தைத் தேர்ந்தெடுப்பதற்காக அவற்றை ஒப்பிட்டுப் பார்ப்பார் என்பது வெளிப்படையானது. அத்தகைய அட்டவணையின் உதாரணத்தை படத்தில் காணலாம்.

அரிசி. 3. ஒப்பிட வேண்டிய தரவுகளுடன் அட்டவணை

இந்த வழக்கில், தொடரை ஒப்பிட்டுப் பார்க்க பயனரை அனுமதிக்கும் தீர்வு நமக்குத் தேவை. வழங்கப்பட்ட விருப்பங்களில் ஒன்று, சிறிய திரைகளில் அட்டவணையை புரட்டுவது, தரவு கிடைமட்ட நிலையில் இருந்து செங்குத்தாக மறுசீரமைக்கப்படும். எனவே, மேல் வரிசை - அட்டவணை தலைப்புகள் - இப்போது இடதுபுற நெடுவரிசையாக மாறியுள்ளது, மேலும் பயனர் தரவுகளுடன் நெடுவரிசைகளை கிடைமட்டமாக உருட்டலாம்.

அரிசி. 4. மொபைல் ஃபோன் திரையில் தரவுகளுடன் அட்டவணை

மற்றொரு விருப்பம் என்னவென்றால், எந்த நெடுவரிசைகளைக் காண்பிக்க வேண்டும் மற்றும் எதைக் காட்டக்கூடாது என்பதைத் தேர்வுசெய்ய பயனரை அனுமதிப்பது. இது நடைமுறைப்படுத்தப்பட்டுள்ளது. குறுகிய திரைகளில், மிக முக்கியமான தரவு இல்லாத நெடுவரிசைகள் மறைக்கப்பட்டுள்ளன, ஆனால் யாராவது அவற்றைப் பார்க்க விரும்பினால், அவர்கள் இந்த நெடுவரிசைகளை இயக்கலாம்.

அரிசி. 5. தளத்தின் முழு பதிப்பில் தரவுகளுடன் அட்டவணை

அரிசி. 6 மற்றும் 7. மொபைல் பதிப்பில் அதே அட்டவணை. மிக முக்கியமான நெடுவரிசைகள் மட்டுமே உள்ளன, ஆனால் தேவைப்பட்டால் மற்ற அனைத்தையும் நீங்கள் சேர்க்கலாம்.

என்ன தகவல் முக்கியமானது?

சிறிய திரைகளில் சில தகவல்களை மறைக்க நீங்கள் முடிவு செய்தால், கேள்வி இயற்கையாகவே எழுகிறது: என்ன தகவல் முக்கியமானது? அத்தகைய சூழ்நிலையில், பின்வரும் கேள்விகளை நீங்களே கேட்டுக்கொள்வது பயனுள்ளதாக இருக்கும்:

• மக்களுக்கு மிகவும் தேவையான தகவல் என்ன?
• அட்டவணை வழங்கும் தகவலைப் புரிந்துகொள்ள எந்த நெடுவரிசைகள் மிகவும் முக்கியமானவை?
• எந்த பேச்சாளர்கள் மக்களுக்கு அதிகம் தேவைப்படுவார்கள்?

பயனர்கள் அட்டவணையின் ஒரு பகுதியை மற்றொன்றிலிருந்து வேறுபடுத்திப் பார்க்க முடியுமா?

ஒரு பயனர் ஒரு அட்டவணையை, வரிசையாக வரிசையாக ஸ்கேன் செய்து, தகவலைத் தேடும்போது, ​​ஒரு வரிசையை மற்றொரு வரிசையிலிருந்து எப்படி விரைவாக வேறுபடுத்துவது? வலை பயன்பாடுகளின் இடைமுகத்தில் அட்டவணைகள் பயன்படுத்தப்படும்போது இது மிகவும் முக்கியமானது.

தளத்தின் முழு பதிப்பில், நாம் விரும்பும் எதையும் அட்டவணையில் வைக்கலாம். ஆனால் மொபைல் பதிப்பிற்கு மிகவும் தேவையான தகவலை விட்டுவிட வேண்டியது அவசியம், மேலும் பயனர் ஒரு தரவை மற்றொன்றுடன் குழப்ப மாட்டார் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

அனைத்தும் ஒரே நேரத்தில் திரையில் இருக்க வேண்டுமா அல்லது தேவைக்கேற்ப கூடுதல் கூறுகளைச் சேர்க்க முடியுமா?

பொதுவாக தள டெவலப்பர் பெரிய திரையில் உள்ள அனைத்தையும் சிறிய திரையில் பொருத்த முயற்சிக்கும் போது பதிலளிக்கக்கூடிய அட்டவணைகளை உருவாக்குவது மிகவும் கடினமான விஷயம். மிகவும் சிக்கலான சந்தர்ப்பங்களில், இது அட்டவணை காட்சியில் பெரிய சிக்கல்களை ஏற்படுத்துகிறது.

திரையின் அளவைப் பொருட்படுத்தாமல் பக்கத்தில் உள்ள அனைத்தையும் காட்டுவது என்பது பதிலளிக்கக்கூடிய வடிவமைப்பு என்று பலர் தவறாக நினைக்கிறார்கள். உண்மையில், மிக முக்கியமான விஷயங்களை மட்டும் குறுகிய திரையில் வைப்பது நல்லது, மேலும் நீங்கள் பெரிதாக்கும்போது மீதமுள்ளவற்றைச் சேர்க்கவும்.

சுவாரஸ்யமாக, பெரும்பாலும் முழுத்திரைப் பதிப்பைக் கொண்டு வடிவமைப்பைத் தொடங்கி, நிறைய உள்ளடக்கங்களைக் கொண்ட ஒரு பெரிய அட்டவணையைப் பார்க்கும்போது, ​​குறுகிய திரையில் அது இந்த உள்ளடக்கத்தில் சிலவற்றை இழக்கும் என்பதை ஏற்றுக்கொள்வது கடினம். ஆனால், "மொபைல் ஃபர்ஸ்ட்" கொள்கையில் நாம் செயல்படும்போது, ​​இதுபோன்ற பிரச்சனைகள் எழுவதில்லை.

எனவே, பதிலளிக்கக்கூடிய வடிவமைப்பில் அட்டவணைகள் வரும்போது அது என்ன முக்கியம்?

• அட்டவணையின் தோற்றம் மாறினாலும் பயனர்கள் அதன் பொருளைப் புரிந்துகொள்வார்களா?
• அட்டவணையில் உள்ள அனைத்து தகவல்களையும் அவர்கள் எப்படியாவது பெற முடியுமா?
• சாதனத்தைப் பொருட்படுத்தாமல் எல்லா URLகளையும் அணுக முடியும் என்பதில் உறுதியாக இருக்கிறீர்களா?

மூன்று கேள்விகளுக்கும் நீங்கள் "ஆம்" என்று பதிலளிக்க முடிந்தால், உங்கள் தளத்தில் அட்டவணையில் எந்த பிரச்சனையும் இல்லை.

உங்கள் அட்டவணையில் சிறப்பாக என்ன செய்ய வேண்டும் என்பதை உங்கள் உள்ளடக்கம் உங்களுக்குத் தெரிவிக்கும்.

பதிலளிக்கக்கூடிய வடிவமைப்பில் அட்டவணைகளை ஏற்பாடு செய்ய பல்வேறு வழிகள் உள்ளன. காலப்போக்கில் அவை இன்னும் அதிகமாக இருக்கும். ஆனால் சரியான முறையை எவ்வாறு தேர்வு செய்வது? ஒரே ஒரு பதில்தான் இருக்க முடியும்.

உங்கள் அட்டவணையில் சிறப்பாக என்ன செய்ய வேண்டும் என்பதை உங்கள் உள்ளடக்கம் உங்களுக்குத் தெரிவிக்கும். அதை சரியாக பகுப்பாய்வு செய்வதே உங்கள் பணி.