பட்டியல்கள் மற்றும் அட்டவணைகளை வடிவமைத்தல் என்பது உங்கள் இணையதளத்தில் தகவலைக் காண்பிப்பதில் இன்றியமையாத பகுதியாகும். உங்கள் விருப்பப்படி பட்டியல்கள் மற்றும் அட்டவணைகளை உருவாக்க மற்றும் தனிப்பயனாக்க CSS பண்புகள் மற்றும் வகுப்புகளை வழங்குகிறது. CSS இல் பட்டியல்கள் மற்றும் அட்டவணைகளை எவ்வாறு வடிவமைப்பது என்பது பற்றிய விரிவான வழிகாட்டி இங்கே உள்ளது.
வடிவமைப்பு பட்டியல்கள்
வரிசைப்படுத்தப்படாத பட்டியல்(உல்)
முக்கிய சொத்து: பட்டியல்-பாணி-வகை.
மதிப்புகள்: none, disc, circle, square.
உதாரணமாக:
ul {
list-style-type: disc;
}
ஆர்டர் செய்யப்பட்ட பட்டியல்(ஓல்)
முக்கிய சொத்து: பட்டியல்-பாணி-வகை.
மதிப்புகள்: எதுவுமில்லை(இயல்புநிலை), தசமம், கீழ்-ஆல்பா, மேல்-ஆல்பா, கீழ்-ரோமன், மேல்-ரோமன்.
உதாரணமாக:
ol {
list-style-type: decimal;
}
வரையறை பட்டியல்(dl)
முக்கிய சொத்து: வரையறை பட்டியல்களை வடிவமைக்க குறிப்பிட்ட CSS சொத்து இல்லை. இருப்பினும், வகுப்புகள் அல்லது பிற பண்புகளைப் பயன்படுத்தி பட்டியலில் உள்ள கூறுகளை நீங்கள் ஸ்டைல் செய்யலாம் font-size, font-weight, margin, padding, etc.
உதாரணமாக:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language for web pages</dd>
</dl>
dt {
font-weight: bold;
}
வடிவமைப்பு அட்டவணைகள்
அட்டவணை அமைப்பு வடிவமைப்பு
முக்கிய சொத்து: border-collapse.
மதிப்புகள்: separate(default), collaps இ.
உதாரணமாக:
table {
border-collapse: collapse;
}
அட்டவணை பார்டர் வடிவமைப்பு
முக்கிய சொத்து: border.
மதிப்புகள்: ஒரு பார்டர் மதிப்பு, எடுத்துக்காட்டாக: 1px solid black.
உதாரணமாக:
table {
border: 1px solid black;
}
செல் பார்டர் வடிவமைப்பு
முக்கிய சொத்து: border.
மதிப்புகள்: ஒரு பார்டர் மதிப்பு, எடுத்துக்காட்டாக: 1px solid black.
உதாரணமாக:
td, th {
border: 1px solid black;
}
அட்டவணை கலங்களின் சீரமைப்பு மற்றும் இடைவெளி
முக்கிய பண்புகள்: text-align, padding.
- text-align: சீரமைப்பு மதிப்புகள், எடுத்துக்காட்டாக:
left, right, center. - padding: கலங்களுக்குள் இடைவெளி மதிப்பு, எடுத்துக்காட்டாக: 10px.
உதாரணமாக:
th {
text-align: center;
padding: 10px;
}
அட்டவணையில் பின்னணி மற்றும் உரை நிறம்
முக்கிய பண்புகள்: background-color, color
background-color: பின்னணி வண்ண மதிப்பு, எடுத்துக்காட்டாக:lightgray.color: உரை வண்ண மதிப்பு, எடுத்துக்காட்டாக:white.
உதாரணமாக:
table {
background-color: lightgray;
color: white;
}
அட்டவணையில் நெடுவரிசை மற்றும் வரிசை அளவு
முக்கிய பண்புகள்: width, height.
width: அகல மதிப்பு, எடுத்துக்காட்டாக: "100px", "20%".height: உயர மதிப்பு, எடுத்துக்காட்டாக: "50px", "10%".
உதாரணமாக:
th {
width: 100px;
height: 50px;
}
CSS இல் பட்டியல்கள் மற்றும் அட்டவணைகளை எப்படி வடிவமைப்பது என்பது பற்றிய விரிவான வழிகாட்டி இது. உங்கள் வலைத்தளத்தில் உங்கள் வடிவமைப்பு தேவைகளுக்கு ஏற்ற பட்டியல் மற்றும் அட்டவணை பாணிகளை உருவாக்க மதிப்புகள் மற்றும் பண்புகளை நீங்கள் தனிப்பயனாக்கலாம்.