HTML பாடம். கலங்களை ஒன்றிணைத்தல்

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

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

அனைத்து அட்டவணை உறுப்புகளுக்கும், அவற்றின் சொந்த பண்புக்கூறுகளும் உள்ளன.

HTML இல் அட்டவணைகளை உருவாக்குதல்

  • உள்ளடக்கம்:
  • 1. ஒரு அட்டவணையை எவ்வாறு உருவாக்குவது

    இணைக்கப்பட்ட குறிச்சொல்லைப் பயன்படுத்தி அட்டவணை உருவாக்கப்பட்டது

    வரைபடம். 1. CSS பண்புகளுடன் வடிவமைக்காமல் அட்டவணையின் தோற்றம்

    இயல்பாக, அட்டவணை மற்றும் கலங்களுக்கு புலப்படும் எல்லைகள் இல்லை. எல்லைகள்எல்லைச் சொத்தைப் பயன்படுத்தி அமைக்கப்பட்டுள்ளன:

    /* அட்டவணையின் வெளிப்புற எல்லைகள் சாம்பல், 1px தடிமன் */ அட்டவணை (எல்லை: 1px திட சாம்பல்;) /* அட்டவணையின் முதல் வரிசையின் கலங்களின் எல்லைகள் */ வது (எல்லை: 1px திட சாம்பல்;) /* எல்லைகள் டேபிள் பாடியின் செல்கள் */ td (எல்லை: 1px திட சாம்பல்;)

    அட்டவணை செல்கள் இடையே இடைவெளிகள்அட்டவணைப் பண்புகளைப் பயன்படுத்தி அகற்றப்படுகின்றன (எல்லை-சரிவு: சரிவு;) .

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

    /* அட்டவணையின் அகலத்தை அது அமைந்துள்ள கொள்கலன் தொகுதியின் அகலத்திற்கு சமமாக மாற்றும் */ அட்டவணை (அகலம்: 100%;) /* அட்டவணை */ அட்டவணைக்கு நிலையான அகலத்தை அமைக்கும் (அகலம்: 600px; )

    டேபிள் கலங்களில் பேடிங் மற்றும் பார்டர்கள் குறிப்பிடப்பட்டிருந்தால், அட்டவணையின் அகலத்தில் பின்வரும் மதிப்புகள் இருக்கும்:
    padding-left மற்றும் padding-right , எல்லையின் அகலம்-இடது மற்றும் வரிசையின் கடைசி கலத்தின் எல்லை-வலது அகலம். கலங்களின் அகலம் மற்றும் எல்லைகள் குறிப்பிடப்பட்டால், அட்டவணையின் அகலமானது, கலங்களின் அகலத்தின் கூட்டுத்தொகையாகவும், வரிசையிலுள்ள கடைசி கலத்தின் எல்லை-இடது அகலம் மற்றும் எல்லை-வலது அகலமாகவும் இருக்கும்.

    2. அட்டவணை வரிசைகளை எவ்வாறு உருவாக்குவது

    டேபிள் வரிசைகள் அல்லது வரிசைகள் குறிச்சொல்லைப் பயன்படுத்தி உருவாக்கப்படுகின்றன

    . கிடைமட்ட அட்டவணை வரிசைகளின் எண்ணிக்கை இணைக்கப்பட்ட குறிச்சொற்களின் எண்ணிக்கையால் தீர்மானிக்கப்படுகிறது .

    3. அட்டவணை நெடுவரிசை தலைப்புக் கலத்தை எவ்வாறு உருவாக்குவது

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

    4. டேபிள் பாடி செல் தயாரிப்பது எப்படி

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

    5. ஒரு அட்டவணையில் ஒரு தலைப்பை (தலைப்பு) எவ்வாறு சேர்ப்பது

    அட்டவணை கையொப்பத்தை உருவாக்குகிறது. குறிச்சொல்லுக்குப் பிறகு நேரடியாகச் சேர்க்கப்பட்டது

    6. அட்டவணை வரிசைகள் மற்றும் நெடுவரிசைகளை தொகுத்தல்

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

    7. அட்டவணை பிரிவுகளை தொகுத்தல்

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

    மற்றும்அட்டவணையின் ஒவ்வொரு பகுதியையும் குறிக்க.

    உறுப்பு பின்வரும் வரிசையில் பயன்படுத்தப்பட வேண்டும்: ஒரு குழந்தை உறுப்பு

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

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

    மற்றும் .

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

    8. அட்டவணை செல்களை எவ்வாறு இணைப்பது

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


    அரிசி. 3. கோல்ஸ்பான் பண்புக்கூறைப் பயன்படுத்தி அட்டவணை செல்களை கிடைமட்டமாக இணைப்பதற்கான எடுத்துக்காட்டு

    9. அட்டவணை உறுப்புகளின் பண்புக்கூறுகள்

    அட்டவணை 1. அட்டவணை உறுப்புகளின் பண்புக்கூறுகள்

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

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

    சாத்தியமான மதிப்புகள்: 1 முதல் 999 வரையிலான எண்.
    இடைவெளி ஒரு ஒற்றை பாணியை வரையறுக்க இணைந்த நெடுவரிசைகளின் இயல்புநிலை எண்ணிக்கை 1 ஆகும்.

    10. அட்டவணையை உருவாக்குவதற்கான எடுத்துக்காட்டு


    அரிசி. 4. HTML அட்டவணையைப் பயன்படுத்தி உணவக மெனுவை உருவாக்கவும்
    "ரோமாஷ்கா" உணவகத்தின் மெனு
    சமையலறை குளிர் உணவுகள் சூடான உணவுகள் இனிப்பு
    சாலடுகள் சிற்றுண்டி முதல் உணவு இரண்டாவது படிப்புகள்
    ரஷ்யன் வினிகிரெட் குதிரைவாலி கொண்ட நாக்கு சார்க்ராட் உடன் ஷிச்சி உருளைக்கிழங்கு பாலாடை தேனுடன் வேகவைத்த ஆப்பிள்கள்
    ஒலிவி மாட்டிறைச்சி ஜெல்லி வீட்டில் தயாரிக்கப்பட்ட ரசோல்னிக் புளிப்பு கிரீம் சுடப்படும் Crucian கெண்டை பான்கேக் பை
    "ஃபர் கோட்" கீழ் ஹெர்ரிங் ஜெல்லிட் பைக் பெர்ச் இறைச்சி hodgepodge கட்லெட்டுகள் "போஜார்ஸ்கி" கேக் "உருளைக்கிழங்கு"
    ஸ்பானிஷ் ஸ்காலப் செவிச் எம்பனதாஸ் பூண்டுடன் ரொட்டி சூப் கடல் உணவுகளுடன் Paella Churros
    வெண்ணெய் மற்றும் டுனா டிம்பல் அஹோடோமேட் அஸ்துரியன் ஃபபாடா பன்றி இறைச்சி ரக்ஸோ அல்மோய்க்சவேனா
    ஹாம் கொண்ட பீன்ஸ் சான்ஃபைனா ரவை பாலாடை கொண்ட மீன் சூப் உருளைக்கிழங்கு டார்ட்டில்லா புனுவேலோஸ்
    பிரெஞ்சு Vosges சாலட் சிக்கன் ரில்லெட் கத்திரிக்காய் கிரீம் சூப் "ரெனோயர்" உருளைக்கிழங்கு ஓக்ரேடன் பிரியோச்சி
    பன்சனெல்லா சாலட் சீஸ் சுவையானது பிரஞ்சு பூசணி சூப் கோழி கிராடின் லிகுரியன் எலுமிச்சை பை
    டார்டாரஸ் Marinated சால்மன் சூப் "கான்டி" டார்டிஃப்லெட் சவரின் "வெற்றி"
    உடல் (விளிம்பு: 0; பின்னணி: #F4F1F8; ) ​​அட்டவணை (எல்லை-சரிவு: சரிவு; வரி-உயரம்: 1.1; எழுத்துரு-குடும்பம்: "லூசிடா சான்ஸ் யூனிகோட்", "லூசிடா கிராண்டே", சான்ஸ்-செரிஃப்; பின்னணி: ரேடியல் -கிரேடியன்ட் (50% 50%, வெள்ளை, #DCECF8 இல் தொலைதூர மூலை); நிறம்: #0C213B; ) தலைப்பு (எழுத்துரு-குடும்பம்: அனாபெல், கர்சீவ்; எழுத்துரு-எடை: தடிமன்; எழுத்துரு அளவு: 2em; திணிப்பு: 10px; நிறம்: #F3CD26; உரை-நிழல்: 1px 1px 0 rgba(0,0,0,.3); ) தலைப்பு:முன், தலைப்பு:பின் (உள்ளடக்கம்: "\274B"; நிறம்: #A9E2CC; விளிம்பு: 0 10px; ) வது (திணிப்பு: 10px; எல்லை: 1px திட #A9E2CC; ) td (எழுத்து அளவு: 0.8em; திணிப்பு: 5px 7px; எல்லை: 1px திட #A9E2CC; ) .முதல் (எழுத்து அளவு: 1எம்; எழுத்துரு-எடை தடித்த; உரை-சீரமைப்பு: மையம்;)

3.8 அட்டவணை கலங்களை ஒன்றிணைத்தல்

நடைமுறையில், ஒரு செல் உயரம் மற்றும் அகலத்தில் பல செல்களை இணைக்கும் ஒரு பெரிய எண்ணிக்கையிலான அட்டவணைகள் உள்ளன (படம் 3.2 ஐப் பார்க்கவும்). HTML இல், colspan மற்றும் rowspan பண்புகளைப் பயன்படுத்தி செல்கள் இணைக்கப்படுகின்றன. கோல்ஸ்பான் பண்புக்கூறு, கொடுக்கப்பட்ட செல் கிடைமட்டமாக பரவியிருக்கும் கலங்களின் எண்ணிக்கையைக் குறிப்பிடுகிறது, மேலும் ரோஸ்பான் பண்புக்கூறு அது செங்குத்தாக பரவியிருக்கும் கலங்களின் எண்ணிக்கையைக் குறிப்பிடுகிறது.

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

அரிசி. 3.12.இணைக்கப்பட்ட கலங்கள் கொண்ட அட்டவணை

பட்டியல் 3.7.செல் மெர்ஜ் பண்புகளைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு

HTML அட்டவணை

கணினி 100 என்ற புத்தகத்திலிருந்து. விண்டோஸ் விஸ்டாவில் தொடங்கி எழுத்தாளர் சோசுல்யா யூரி

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

ஆட்டோகேட் 2009 புத்தகத்திலிருந்து நூலாசிரியர் ஓர்லோவ் ஆண்ட்ரே அலெக்ஸாண்ட்ரோவிச்

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

எக்செல் பணிப்புத்தகத்திலிருந்து. மல்டிமீடியா படிப்பு ஆசிரியர் மெடினோவ் ஓலெக்

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

ஆட்டோகேட் 2010 புத்தகத்திலிருந்து நூலாசிரியர் ஓர்லோவ் ஆண்ட்ரே அலெக்ஸாண்ட்ரோவிச்

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

கணினி அறிவியலின் அடிப்படைகள் புத்தகத்திலிருந்து: பல்கலைக்கழகங்களுக்கான பாடநூல் நூலாசிரியர் மாலினினா லாரிசா அலெக்ஸாண்ட்ரோவ்னா

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

MySQL: A Professional's Guide என்ற புத்தகத்திலிருந்து நூலாசிரியர் பாடோவ் அலெக்ஸி வி

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

HTML 5, CSS 3 மற்றும் Web 2.0 புத்தகத்திலிருந்து. நவீன வலைத்தளங்களின் வளர்ச்சி. நூலாசிரியர் ட்ரோனோவ் விளாடிமிர்

10.3.3. அட்டவணை எழுத்துத் தொகுப்பு மற்றும் சேர் ஒவ்வொரு அட்டவணைக்கும் ஒரு அட்டவணை எழுத்துத் தொகுப்பு உள்ளது மற்றும் சேரவும். அட்டவணையை உருவாக்கவும் மற்றும் அட்டவணையை மாற்றவும் அறிக்கைகள் அட்டவணையின் எழுத்துத் தொகுப்பைக் குறிப்பிடுவதற்கும், சேர்வதற்கும் விருப்பமான உட்பிரிவுகளைக் கொண்டுள்ளன: அட்டவணையை உருவாக்கவும் tbl_name(column_list)[ CHARACTER SET charset_name])



ஒரு செல் ஒரு வரிசையில் உள்ள அனைத்து செல்களையும் இணைக்கிறது
இரண்டு வரி செல்செல் 2x2செல் 2x3
செல் 3x2செல் 3x3
இரண்டு வரி செல்செல் 4x2செல் 4x3
செல் 5x2செல் 5x3