ਸੂਚੀਆਂ ਅਤੇ ਸਾਰਣੀਆਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨਾ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ 'ਤੇ ਜਾਣਕਾਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦਾ ਇੱਕ ਜ਼ਰੂਰੀ ਹਿੱਸਾ ਹੈ। CSS ਤੁਹਾਡੀ ਪਸੰਦ ਅਨੁਸਾਰ ਸੂਚੀਆਂ ਅਤੇ ਟੇਬਲਾਂ ਨੂੰ ਬਣਾਉਣ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਕਲਾਸਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਥੇ CSS ਵਿੱਚ ਸੂਚੀਆਂ ਅਤੇ ਟੇਬਲਾਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਬਾਰੇ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਗਾਈਡ ਹੈ।
ਫਾਰਮੈਟਿੰਗ ਸੂਚੀਆਂ
ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀ(ul)
ਮੁੱਖ ਸੰਪਤੀ: ਸੂਚੀ-ਸ਼ੈਲੀ-ਕਿਸਮ।
ਮੁੱਲ: none, disc, circle, square.
ਉਦਾਹਰਨ:
ul {
list-style-type: disc;
}
ਕ੍ਰਮਬੱਧ ਸੂਚੀ(ol)
ਮੁੱਖ ਸੰਪਤੀ: ਸੂਚੀ-ਸ਼ੈਲੀ-ਕਿਸਮ।
ਮੁੱਲ: ਕੋਈ ਨਹੀਂ(ਪੂਰਵ-ਨਿਰਧਾਰਤ), ਦਸ਼ਮਲਵ, ਲੋਅਰ-ਐਲਫ਼ਾ, ਅੱਪਰ-ਐਲਫ਼ਾ, ਲੋਅਰ-ਰੋਮਨ, ਅੱਪਰ-ਰੋਮਨ।
ਉਦਾਹਰਨ:
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.
- ਟੈਕਸਟ-ਅਲਾਈਨ: ਅਲਾਈਨਮੈਂਟ ਮੁੱਲ, ਉਦਾਹਰਨ ਲਈ:
left, right, center. - ਪੈਡਿੰਗ: ਸੈੱਲਾਂ ਦੇ ਅੰਦਰ ਸਪੇਸਿੰਗ ਮੁੱਲ, ਉਦਾਹਰਨ ਲਈ: 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 ਵਿੱਚ ਸੂਚੀਆਂ ਅਤੇ ਟੇਬਲਾਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਇੱਕ ਵਿਆਪਕ ਗਾਈਡ ਹੈ। ਤੁਸੀਂ ਸੂਚੀ ਅਤੇ ਟੇਬਲ ਸਟਾਈਲ ਬਣਾਉਣ ਲਈ ਮੁੱਲਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ 'ਤੇ ਤੁਹਾਡੀਆਂ ਡਿਜ਼ਾਈਨ ਜ਼ਰੂਰਤਾਂ ਦੇ ਅਨੁਕੂਲ ਹਨ।