HTML Unordered Lists

HTML ஒழுங்கற்ற பட்டியல்கள்

HTML ஒழுங்கற்ற பட்டியல்கள்

HTML <ul> குறிச்சொல் ஒரு ஒழுங்கற்ற (குண்டுகளுடன்) பட்டியலை வரையறுக்கிறது.

ஒழுங்கற்ற HTML பட்டியல்

ஒரு ஒழுங்கற்ற பட்டியல் <ul> குறிச்சொல்லுடன் தொடங்குகிறது. ஒவ்வொரு பட்டியல் உருப்படியும் <li> குறிச்சொல்லுடன் தொடங்குகிறது.

இயல்புநிலையாக பட்டியல் உருப்படிகள் குண்டுகளால் (சிறிய கருப்பு வட்டங்கள்) குறிக்கப்படும்:

எடுத்துக்காட்டு

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

ஒழுங்கற்ற HTML பட்டியல் - பட்டியல் உருப்படி மார்க்கரைத் தேர்ந்தெடுக்கவும்

CSS list-style-type பண்பு பட்டியல் உருப்படி மார்க்கரின் பாணியை வரையறுக்கப் பயன்படுத்தப்படுகிறது. இது பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

மதிப்பு விளக்கம்
disc பட்டியல் உருப்படி மார்க்கரை குண்டுக்கு அமைக்கிறது (இயல்புநிலை)
circle பட்டியல் உருப்படி மார்க்கரை வட்டத்திற்கு அமைக்கிறது
square பட்டியல் உருப்படி மார்க்கரை சதுரத்திற்கு அமைக்கிறது
none பட்டியல் உருப்படிகள் குறிக்கப்படாது

Disc

எடுத்துக்காட்டு - Disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Circle

எடுத்துக்காட்டு - Circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Square

எடுத்துக்காட்டு - Square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

No List Marker

எடுத்துக்காட்டு - None

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

கூடு கட்டிய HTML பட்டியல்கள்

பட்டியல்கள் கூடு கட்டப்படலாம் (பட்டியலுக்குள் பட்டியல்):

எடுத்துக்காட்டு

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

📝 குறிப்பு:

ஒரு பட்டியல் உருப்படி (<li>) புதிய பட்டியல் மற்றும் பிற HTML உறுப்புகளைக் கொண்டிருக்கலாம், படங்கள் மற்றும் இணைப்புகள் போன்றவை.

CSS உடன் கிடைமட்ட பட்டியல்

HTML பட்டியல்களை CSS உடன் பல வெவ்வேறு வழிகளில் பாணியமைக்கலாம்.

ஒரு பிரபலமான வழி என்னவென்றால், ஒரு வழிசெலுத்தல் மெனுவை உருவாக்க, ஒரு பட்டியலை கிடைமட்டமாக பாணியமைக்க:

எடுத்துக்காட்டு

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

💡 உதவிக்குறிப்பு:

CSS பற்றி மேலும் அறிய எங்கள் CSS டுடோரியலைப் பார்க்கலாம்.

அத்தியாய சுருக்கம்

பயிற்சி

❓ ஒழுங்கற்ற பட்டியல்களின் பட்டியல் மார்க்கரின் பாணியை வரையறுக்கும்போது பயன்படுத்த சரியான CSS பண்பு எது?

list-style-type
✓ சரி! list-style-type பண்பு பட்டியல் மார்க்கரின் பாணியை வரையறுக்கப் பயன்படுகிறது
style-type-list
✗ தவறு! style-type-list என்பது செல்லுபடியாகும் CSS பண்பு அல்ல
type-list-style
✗ தவறு! type-list-style என்பது செல்லுபடியாகும் CSS பண்பு அல்ல

HTML பட்டியல் குறிச்சொற்கள்

குறிச்சொல் விளக்கம்
<ul> ஒரு ஒழுங்கற்ற பட்டியலை வரையறுக்கிறது
<ol> ஒரு ஒழுங்கான பட்டியலை வரையறுக்கிறது
<li> ஒரு பட்டியல் உருப்படியை வரையறுக்கிறது
<dl> ஒரு விளக்கப் பட்டியலை வரையறுக்கிறது
<dt> விளக்கப் பட்டியலில் ஒரு சொல்லை வரையறுக்கிறது
<dd> விளக்கப் பட்டியலில் சொல்லை விவரிக்கிறது

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