டேக் மற்றும் CSS ஐப் பயன்படுத்தி மட்டும் அட்டவணையை உருவாக்குவது எப்படி

” குறிச்சொற்கள் அதன் உள்ளே.

---

---

உதாரணமாக
அட்டவணையை உருவாக்க பின்வரும் HTML குறியீட்டின் உதாரணத்தைக் கவனியுங்கள்:

< div வர்க்கம் = 'டிவ் டேபிள்' >
< div வர்க்கம் = 'தலைவரிசை' >
< div வர்க்கம் = 'divCell' >< பி > ஐடி < / பி >< / div >
< div வர்க்கம் = 'divCell' >< பி > பெயர் < / பி >< / div >
< div வர்க்கம் = 'divCell' >< பி > வயது < / பி >< / div >
< / div >
< div வர்க்கம் = 'டிவ்ரோ' >
< div வர்க்கம் = 'divCell' > 001 < / div >
< div வர்க்கம் = 'divCell' > ஸ்மித் < / div >
< div வர்க்கம் = 'divCell' > 25 < / div >
< / div >
< div வர்க்கம் = 'டிவ்ரோ' >
< div வர்க்கம் = 'divCell' > 002 < / div >
< div வர்க்கம் = 'divCell' > ஜான் < / div >
< div வர்க்கம் = 'divCell' > 31 < / div >
< / div >
< div வர்க்கம் = 'டிவ்ரோ' >
< div வர்க்கம் = 'divCell' > 003 < / div >
< div வர்க்கம் = 'divCell' > சார்லஸ் < / div >
< div வர்க்கம் = 'divCell' > 28 < / div >
< / div >
< / div >

மேலே உள்ள குறியீடு துணுக்கில்:

• ஒரு '
  'குறிச்சொல்' என்ற வகுப்பில் சேர்க்கப்பட்டுள்ளது divTable ”.
• உள்ளே ' div 'கொள்கலன் உறுப்பு, இன்னொன்றைச் சேர்க்கவும்' div '' என அறிவிக்கப்பட்ட வகுப்பைக் கொண்ட கொள்கலன் உறுப்பு தலைப்புவரிசை ”.
• மீண்டும், மூன்றைச் சேர்க்கவும் ' div 'வகுப்புகளைக் கொண்ட கூறுகள்' divRow 'மூன்று துணை கொள்கலன்களுடன்' divCell ' வர்க்கம்.
• பின்னர், மூன்று பிரிவு கூறுகளைச் சேர்க்கவும் ' ஐடி ”,” பெயர் 'மற்றும்' வயது ” அட்டவணையின் தலைப்பு வரிசையில்.
• அதன் பிறகு, ஒவ்வொரு DIV உறுப்புக்கும் 'ஐடி', 'பெயர்' மற்றும் 'வயது' ஆகியவற்றிற்கான மதிப்புகளைக் குறிப்பிடவும்.

இதை எப்படி பயன்படுத்துவது என்பது பற்றியது ' div ஒரு அட்டவணையை உருவாக்க உறுப்பு. இப்போது, ​​அதற்கு CSS பண்புகளைப் பயன்படுத்துவோம்:

---

---

.divTable
{
காட்சி: அட்டவணை;
அகலம் : ஆட்டோ;
பின்னணி - நிறம் :#eee;
எல்லை :1px திட # 666666 ;
எல்லை இடைவெளி:5px;
}
.divRow
{
அகலம் : ஆட்டோ;
காட்சி:அட்டவணை-வரிசை;
}
.divCell
{
அகலம் :150px;
மிதவை:இடது;
காட்சி:அட்டவணை-நெடுவரிசை;
பின்னணி - நிறம் : rgb ( 212 , 209 , 209 ) ;
}

மேலே உள்ள CSS பாணி உறுப்பில்:

• 'ஐக் குறிக்கும் தேர்வாளரைச் சேர்க்கவும் divTable ” (அதில் அனைத்து அட்டவணை மதிப்புகளும் உள்ளன) மற்றும் விரும்பிய CSS பண்புகளை வரையறுக்கவும் (அதாவது, ' காட்சி ”,” அகலம் ”,” பின்னணி நிறம் ”,” எல்லை 'மற்றும்' எல்லை-இடைவெளி ”) அட்டவணை உள்ளடக்கத்திற்கு.
• அதன் பிறகு, '' இன் கூறுகளைத் தேர்ந்தெடுக்கும் வகுப்புத் தேர்வியைச் சேர்க்கவும் divRow 'CSS ஐ சேர்க்க வகுப்பு' அகலம் 'மற்றும்' காட்சி ”கூறுகளுக்கு பண்புகள்.
• கடைசியாக, '' இல் உள்ள உறுப்புகளுக்கு CSS பாணி பண்புகளைச் சேர்க்கவும் .divCell ”வகுப்பு தேர்வாளர்.

இது வெளியீட்டில் ஒரு அட்டவணையை உருவாக்கும் மற்றும் பின்வரும் முடிவுகளைக் காண்பிக்கும்: