HTML அட்டவணை பயன்படுத்தி

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

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

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

எப்படி ஒரு அட்டவணை, HTML செய்ய?

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

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

உதாரணம் 2 டேபிள் 2.

<டேபிளின் அகலத்தை = "100%" எல்லை = "1">

முதல் செல் முதல் வரி உரை

முதல் செல் இரண்டாவது வரி உரை

இரண்டாவது வரிசையில் முதல் கலத்தின் உரையை

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

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

முக்கிய விதி: ஒவ்வொரு வரிசையில் செல்களின் எண்ணிக்கை அதே இருக்க வேண்டும். அது ஒரு அட்டவணை உள்ளது.

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

எப்படி அட்டவணையில் கலங்களை இணைக்க?

இணைப்பது மற்றும் colspan rowspan பண்புகளை பயன்படுத்த. Span "கவர்" அல்லது "மேல்படியும்" என்று மொழிபெயர்க்கப்படுகிறது. துல்லியமான பொருள் - மறைப்பதற்கு / செல் / வரிசையில் மூட.

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

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

நீங்கள் 2 முதல் 4 ஒன்றாக்க வேண்டும் 5 செல்கள் இருந்தால், நீங்கள் செல் எண் 2 வெறும் வேண்டும் பண்பு கோல்ஸ்பன் = "3" குறிப்பிடவும்.

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

தகவல் பாதுகாக்க மற்றொரு உதாரணம் பாருங்கள். சில குழப்பி மற்றும் பதிலாக சில நேரங்களில் இணைந்து செல்கள் வரிசைகள் பண்புகளை என்பதால்.

அட்டவணை வடிவம்

HTML இன் ஒரு சாதாரண, தரமான வழக்கு எடுத்து. டேபிள் இரண்டு உயிரணுக்களினுள் இரண்டு வரிசைகள்.

குறியீட்டின் பின்வருமாறு இருக்கும்.

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

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

கிடைமட்டமாக align சீரமை, மற்றும் வவேலின் - செங்குத்து. அதாவது இத்தகைய முடிவு தான் இது.

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

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

எப்படி அட்டவணையில் பாணியை இணைக்க?

எந்த போல் குறிச்சொற்களை HTML, அட்டவணை பாணியை மூலம் மாற்ற முடியும். <: // தளத்தில் /article/255972/%E2%80%9Cstyle.css%E2%80%9D வகை = "உரை / CSS" இணைப்பை ரெல் = "நடைதாளுடன்" படம் =: http> அல்லது நீங்கள் தலையில் பாணி கோப்பு குறிப்பிட வேண்டும் தயாராக பாணி (தலையில் கூறினார்).

<தலை>

...

<பாணி வகை = "உரை / CSS ">

அட்டவணை {

எழுத்துரு-குடும்பம்: Verdana, ஏரியல், ஹெல்வெடிகா, sans-serif;

நிறம்: # 000000;

}

.my_class

{

நிறம்: # 666666;

}

...

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

<அட்டவணை வர்க்கம் = "my_class">

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

<அட்டவணை வர்க்கம் = "style_table" அகலம் = " 100%" எல்லை = "1">

முதல் செல் முதல் வரி உரை

முதல் செல் இரண்டாவது வரி உரை

இரண்டாவது வரிசையில் முதல் கலத்தின் உரையை

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

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

அட்டவணைகளில் கூடுதல் பண்புகளை

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

align	கிடைமட்ட சீரமைப்பு
வவேலின்	செங்குத்து சீரமைப்பு
பின்னணி	செல் / அட்டவணையில் பின்னணி படத்தை
ப்க்கோலோர்	பின்னணியில் நிறம் செல்
borderColor	பிரேம் நிறம் அட்டவணை / செல்கள்
உயரம்	செல் உயரம்
உள்ள nowrap	ஒரு சரம் உரை மடிப்பு தடைசெய்யப்பட்டது.
அகலம்	செல் / அட்டவணை அகலம்

நீங்கள் பார்க்க முடியும் என, அட்டவணை உள்ள HTML பயன்படுத்த "கருவிகளின்" ஒரு பெரிய எண் இருக்க முடியும்.

அழகான HTML அட்டவணைகளை பயன்படுத்தி உருவாக்கப்பட்ட. உதாரணங்கள்

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

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