CSS ਦੇ ਨਾਲ ਟੇਬਲ ਵਿੱਚ ਅੰਦਰੂਨੀ ਲਾਈਨਾਂ (ਬਾਰਡਰ) ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰੀਏ

ਸਿਰਫ ਪੰਜ ਮਿੰਟ ਵਿਚ CSS ਸਾਰਣੀ ਬਣਾਉਣ ਲਈ ਸਿੱਖੋ

ਤੁਸੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ ਕਿ CSS ਅਤੇ HTML ਸਾਰਣੀਆਂ ਰਲਾਉ ਨਹੀਂ ਕਰਦੀਆਂ. ਇਹ ਬਸ ਸਹੀ ਨਹੀਂ ਹੈ. ਹਾਂ, ਲੇਆਉਟ ਲਈ ਐਚਟੀਐਮਐਲ ਟੇਬਲ ਵਰਤਣਾ ਹੁਣ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵਧੀਆ ਪ੍ਰੈਕਟਿਸ ਨਹੀਂ ਹੈ, ਜਿਸ ਦੀ ਵਰਤੋਂ CSS ਲੇਆਉਟ ਸਟਾਈਲ ਦੁਆਰਾ ਕੀਤੀ ਗਈ ਹੈ, ਪਰ ਟੇਬਲ ਅਜੇ ਵੀ ਵੈਬਪੰਨਾ ਤੇ ਸਾਰਣੀਕਾਰ ਡੇਟਾ ਨੂੰ ਜੋੜਨ ਲਈ ਵਰਤਣ ਲਈ ਸਹੀ ਮਾਰਕਅਪ ਹੈ.

ਬਦਕਿਸਮਤੀ ਨਾਲ, ਇਸ ਲਈ ਕਿ ਬਹੁਤ ਸਾਰੇ ਵੈਬ ਪੇਸ਼ਾਵਰਾਂ ਨੇ ਸੋਚਿਆ ਕਿ ਉਹ ਜ਼ਹਿਰ ਹਨ, ਟੇਬਲ ਤੋਂ ਦੂਰ ਹਨ, ਇਨ੍ਹਾਂ ਵਿੱਚੋਂ ਬਹੁਤ ਸਾਰੇ ਪੇਸ਼ੇਵਰਾਂ ਕੋਲ ਇਸ ਆਮ HTML ਐਲੀਮੈਂਟ ਅਤੇ ਸੰਘਰਸ਼ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਦਾ ਬਹੁਤ ਘੱਟ ਤਜਰਬਾ ਹੈ ਜਦੋਂ ਉਨ੍ਹਾਂ ਨੂੰ ਕਿਸੇ ਵੈਬਪੇਜ ਤੇ ਕੰਮ ਕਰਨਾ ਪੈਂਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੇਜ ਤੇ ਟੇਬਲ ਹੈ ਅਤੇ ਤੁਸੀਂ ਟੇਬਲ ਸੈਲ ਵਿੱਚ ਅੰਦਰੂਨੀ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ

CSS ਸਾਰਣੀ ਬੌਰਡਰ

ਜਦੋਂ ਤੁਸੀਂ ਟੇਬਲਸ ਨੂੰ ਬਾਰਡਰ ਜੋੜਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਕੇਵਲ ਟੇਬਲ ਦੇ ਬਾਹਰ ਦੀ ਬਾਰਡਰ ਨੂੰ ਜੋੜਦਾ ਹੈ ਜੇ ਤੁਸੀਂ ਉਸ ਟੇਬਲ ਦੇ ਵੱਖਰੇ ਸੈੱਲਾਂ ਵਿਚ ਅੰਦਰੂਨੀ ਲਾਈਨਾਂ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਅੰਦਰੂਨੀ CSS ਤੱਤਾਂ ਨੂੰ ਬਾਰਡਰ ਜੋੜਨ ਦੀ ਲੋੜ ਹੈ. ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਸੈੱਲਾਂ ਵਿੱਚ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਐਚਆਰ ਟੈਗ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ

ਇਸ ਲੇਖ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ, ਤੁਹਾਡੇ ਕੋਲ ਆਪਣੇ ਵੈਬ ਪੇਜ ਤੇ ਸਾਰਣੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ. ਫਿਰ ਤੁਹਾਨੂੰ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਸਿਰ ਵਿਚ ਇਕ ਅੰਦਰੂਨੀ ਸਟਾਇਲ ਸ਼ੀਟ ਦੇ ਤੌਰ ਤੇ ਸਟਾਇਲ ਸ਼ੀਟ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ (ਤੁਸੀਂ ਸੰਭਾਵੀਂ ਹੀ ਇਹ ਕਰੋਗੇ ਜੇ ਤੁਹਾਡੀ "ਸਾਈਟ" ਇਕੋ ਪੇਜ ਹੈ) ਜਾਂ ਡੌਕਯੂਮੈਂਟ ਨੂੰ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਦੇ ਰੂਪ ਵਿਚ ਜੋੜਿਆ ਜਾਵੇ (ਇਹ ਉਹੀ ਹੈ ਜੋ ਤੁਸੀਂ ਕੀ ਕਰੇਗਾ ਜੇ ਤੁਹਾਡੀ ਸਾਈਟ ਮਲਟੀਪਲ ਪੰਨੇ ਹਨ - ਤੁਹਾਨੂੰ ਇੱਕ ਬਾਹਰੀ ਸ਼ੀਟ ਦੇ ਸਾਰੇ ਪੰਨਿਆਂ ਨੂੰ ਸਟਾਈਲ ਦੇਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ). ਤੁਸੀਂ ਸ਼ੈਲੀ ਨੂੰ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿਚ ਅੰਦਰਲੀ ਲਾਈਨਾਂ ਜੋੜਨ ਲਈ ਸਟਾਈਲਜ਼ ਨੂੰ ਪਾਓਗੇ.

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ

ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ ਫੈਸਲਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੀ ਮੇਜ਼ ਵਿਚ ਕਿੱਥੇ ਲਾਈਨਾਂ ਚਾਹੁੰਦੇ ਹੋ. ਤੁਹਾਡੇ ਕੋਲ ਕਈ ਵਿਕਲਪ ਹਨ, ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

• ਗਰਿੱਡ ਬਣਾਉਣ ਲਈ ਸਾਰੇ ਸੈੱਲਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ;
• ਸਿਰਫ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਦੀਆਂ ਲਾਈਨਾਂ ਦੀ ਸਥਿਤੀ;
• ਸਿਰਫ ਕਤਾਰਾਂ ਦੇ ਵਿਚਕਾਰ; ਜਾਂ
• ਖਾਸ ਕਾਲਮਾਂ ਜਾਂ ਕਤਾਰਾਂ ਵਿਚਕਾਰ

ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਸੈੱਲਾਂ ਜਾਂ ਵਿਅਕਤੀਗਤ ਸੈਲ ਦੇ ਅੰਦਰ ਲਾਈਨਾਂ ਦੀ ਸਥਿਤੀ ਵੀ ਕਰ ਸਕਦੇ ਹੋ

ਇੱਕ ਸਾਰਣੀ ਵਿੱਚ ਸਾਰੇ ਸੈੱਲਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਲਾਈਨਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜੋ

ਆਪਣੇ ਟੇਬਲ ਦੇ ਸਾਰੇ ਸੈੱਲਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ, ਗਰਿੱਡ-ਵਰਗੀ ਪ੍ਰਭਾਵ ਬਣਾਉਂਦੇ ਹੋਏ, ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿੱਚ ਹੇਠ ਲਿਖੋ:

td, th {
ਸਰਹੱਦ: ਠੋਸ 1px ਕਾਲੇ;
}

ਇੱਕ ਸਾਰਣੀ ਵਿੱਚ ਬਸ ਕਾਲਮ ਦੇ ਵਿਚਕਾਰ ਲਾਈਨ ਕਿਵੇਂ ਜੋੜੋ

ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ (ਇਹ ਖੜ੍ਹੇ ਰੇਖਾਵਾਂ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਟੇਬਲ ਦੇ ਕਾਲਮਾਂ ਤੇ ਉੱਤੇ ਤੋਂ ਹੇਠਾਂ ਚਲਦੀਆਂ ਹਨ), ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿੱਚ ਹੇਠ ਲਿਖੋ:

td, th {
ਸੀਮਾ-ਖੱਬੇ: ਠੋਸ 1px ਕਾਲੇ;
}

ਫਿਰ, ਜੇ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਉਹ ਪਹਿਲੇ ਕਾਲਮ ਵਿਚ ਪੇਸ਼ ਹੋਣ, ਤਾਂ ਤੁਹਾਨੂੰ ਉਨ੍ਹਾਂ ਵੈਂ ਅਤੇ ਟੀਡੀ ਸੈੱਲਾਂ ਵਿਚ ਇਕ ਕਲਾਸ ਜੋੜਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਮੰਨਦੇ ਹਾਂ ਕਿ ਸਾਡੇ ਕੋਲ ਉਨ੍ਹਾਂ ਕੋਸ਼ੀਕਾਵਾਂ ਤੇ ਬਿਨਾਂ ਸਰਹੱਦ ਦੀ ਕਲਾਸ ਹੈ ਅਤੇ ਅਸੀਂ ਇਸ ਹੋਰ ਵਿਸ਼ੇਸ਼ CSS ਨਿਯਮ ਦੇ ਨਾਲ ਬਾਰਡਰ ਨੂੰ ਹਟਾਉਂਦੇ ਹਾਂ. ਸੋ ਇੱਥੇ ਐਚਐਮਐਲ ਕਲਾਸ ਹੈ ਜੋ ਅਸੀਂ ਵਰਤਾਂਗੇ:

class = "no-border">

ਅਤੇ ਫੇਰ ਅਸੀਂ ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿੱਚ ਹੇਠ ਦਿੱਤੀ ਸਟਾਈਲ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹਾਂ:

.no-border {
ਬਾਰਡਰ-ਖੱਬੇ: ਕੋਈ ਨਹੀਂ;
}

ਇਕ ਸਾਰਣੀ ਵਿਚ ਕੇਵਲ ਇਕ ਕਤਾਰ ਦੇ ਵਿਚਕਾਰ ਲਾਈਨਾਂ ਕਿਵੇਂ ਜੋੜਨੀਆਂ ਹਨ

ਜਿਵੇਂ ਕਿ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜਦੇ ਹੋਏ, ਤੁਸੀਂ ਇਸ ਨੂੰ ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿਚ ਸ਼ਾਮਲ ਇਕ ਸਧਾਰਨ ਸ਼ੈਲੀ ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ. ਹੇਠਾਂ ਦਿੱਤੀ CSS ਸਾਡੇ ਸਾਰਣੀ ਦੀਆਂ ਹਰੇਕ ਲਾਈਨ ਦੇ ਵਿਚਕਾਰ ਖੜ੍ਹੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜ ਦੇਵੇਗਾ:

tr {
ਸੀਮਾ-ਹੇਠਾਂ: ਠੋਸ 1px ਕਾਲੇ;
}

ਅਤੇ ਸਾਰਣੀ ਦੇ ਤਲ ਤੋਂ ਬਾਰਡਰ ਨੂੰ ਹਟਾਉਣ ਲਈ, ਤੁਸੀਂ ਇਕ ਵਾਰ ਫਿਰ ਉਸ ਟ੍ਰਾਂਸਡ ਟੈਗ ਨੂੰ ਕਲਾਸ ਵਿਚ ਸ਼ਾਮਲ ਕਰੋਗੇ:

class = "no-border">

ਆਪਣੀ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਹੇਠ ਦਿੱਤੀ ਸਟਾਈਲ ਜੋੜੋ:

.no-border {
ਬਾਰਡਰ-ਥੱਲੇ: ਕੋਈ ਨਹੀਂ;
}

ਇੱਕ ਸਾਰਣੀ ਵਿੱਚ ਖ਼ਾਸ ਕਾਲਮ ਜਾਂ ਕਤਾਰਾਂ ਵਿਚਕਾਰ ਲਾਈਨਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜੋ

ਜੇ ਤੁਸੀਂ ਸਿਰਫ ਵਿਸ਼ੇਸ਼ ਕਤਾਰਾਂ ਜਾਂ ਕਾਲਮਾਂ ਵਿਚਲੀਆਂ ਲਾਈਨਾਂ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਸੈੱਲਾਂ ਜਾਂ ਕਤਾਰਾਂ ਤੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. ਕਾਲਮ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਲਾਈਨ ਜੋੜਨਾ ਕਤਾਰਾਂ ਦੇ ਵਿਚਕਾਰ ਥੋੜਾ ਹੋਰ ਮੁਸ਼ਕਿਲ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਉਸ ਕਾਲਮ ਦੇ ਹਰ ਸੈੱਲ ਵਿੱਚ ਕਲਾਸ ਜੋੜਨਾ ਹੁੰਦਾ ਹੈ. ਜੇ ਤੁਹਾਡੀ ਸਾਰਣੀ ਕਿਸੇ ਕਿਸਮ ਦੇ ਇੱਕ ਸੀ.ਐਮ.ਐਸ. ਤੋਂ ਸਵੈਚਲਿਤ ਤੌਰ ਤੇ ਬਣੀ ਹੋਈ ਹੈ, ਤਾਂ ਇਹ ਸੰਭਵ ਨਹੀਂ ਹੋ ਸਕਦਾ, ਪਰ ਜੇ ਤੁਸੀਂ ਹੱਥ ਪੇਜ਼ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਇਸ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਕਲਾਸਾਂ ਜੋੜ ਸਕਦੇ ਹੋ.

ਕਲਾਸ = "ਸਾਈਡ-ਸੀਮਾ">

ਕਤਾਰਾਂ ਵਿਚਲੀਆਂ ਲਾਈਨਾਂ ਜੋੜਨੀਆਂ ਬਹੁਤ ਸੌਖਾ ਹੁੰਦੀਆਂ ਹਨ, ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਸਿਰਫ ਉਸ ਲਾਈਨ ਵਿੱਚ ਕਲਾਸ ਜੋੜ ਸਕਦੇ ਹੋ ਜਿਸ 'ਤੇ ਤੁਸੀਂ ਲਾਈਨ ਚਾਹੁੰਦੇ ਹੋ.

class = "ਬਾਰਡਰ-ਥੱਲਾ">

ਫਿਰ CSS ਨੂੰ ਆਪਣੀ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਜੋੜੋ:

.border- ਸਾਈਡ {
ਸੀਮਾ-ਖੱਬੇ: ਠੋਸ 1px ਕਾਲੇ;
}
.border-bottom {
ਸੀਮਾ-ਹੇਠਾਂ: ਠੋਸ 1px ਕਾਲੇ;
}

ਇੱਕ ਸਾਰਣੀ ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਸੈਲ ਦੇ ਦੁਆਲੇ ਲਾਈਨਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜੋ

ਵਿਅਕਤੀਗਤ ਸੈੱਲਾਂ ਦੇ ਦੁਆਲੇ ਲਾਈਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ, ਤੁਸੀਂ ਉਹਨਾਂ ਸੈੱਲਾਂ ਲਈ ਇੱਕ ਕਲਾਸ ਜੋੜੋਗੇ ਜੋ ਤੁਸੀਂ ਸੀਮਾ ਦੇ ਦੁਆਲੇ ਸੀਮਾ ਚਾਹੁੰਦੇ ਹੋ:

class = "border">

ਅਤੇ ਫਿਰ ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿੱਚ ਹੇਠ ਦਿੱਤੀ CSS ਸ਼ਾਮਲ ਕਰੋ:

.border {
ਸਰਹੱਦ: ਠੋਸ 1px ਕਾਲੇ;
}

ਇੱਕ ਸਾਰਣੀ ਵਿੱਚ ਵਿਅਕਤੀਗਤ ਸੈਲ ਦੇ ਅੰਦਰ ਲਾਈਨਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜੋ

ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਸੈੱਲ ਦੇ ਅੰਸ਼ਾਂ ਦੇ ਅੰਦਰ ਲਾਈਨਾਂ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਅਜਿਹਾ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ ਕਿ ਹਰੀਜ਼ਟਲ ਨਿਯਮ ਟੈਗ (

---

) ਦੇ ਨਾਲ.

ਉਪਯੋਗੀ ਸੁਝਾਅ

ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਬਾਰਡਰਜ਼ ਵਿਚ ਫਰਕ ਦੇਖਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਬਾਰਡਰ-ਪਤਨ ਸ਼ੈਲੀ ਤੁਹਾਡੇ ਟੇਬਲ ਤੇ ਸੈਟ ਕੀਤੀ ਗਈ ਹੈ. ਆਪਣੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਤੇ ਹੇਠ ਲਿਖੋ:

ਸਾਰਣੀ {
ਸਰਹੱਦ-ਢਹਿ-ਢੇਰੀ: ਢਹਿ;
}

ਤੁਸੀਂ ਉਪਰੋਕਤ ਸਾਰੇ CSS ਤੋਂ ਬਚ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੀ ਸਾਰਣੀ ਟੈਗ ਵਿੱਚ ਬਾਰਡਰ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ. ਹਾਲਾਂਕਿ, ਇਹ ਮੰਨਣਾ ਹੈ ਕਿ ਉਸਦੀ ਵਿਸ਼ੇਸ਼ਤਾ, ਜੋ ਕਿ ਨਾਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤੀ ਗਈ ਹੈ, CSS ਦੇ ਮੁਕਾਬਲੇ ਕਾਫ਼ੀ ਘੱਟ ਲਚਕੀਲਾ ਹੈ, ਕਿਉਂਕਿ ਤੁਸੀਂ ਸਿਰਫ ਬਾਰਡਰ ਦੀ ਚੌੜਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਸਿਰਫ ਸਾਰਣੀ ਦੇ ਕਿਸੇ ਵੀ ਸੈੱਲ ਜਾਂ ਕੋਈ ਵੀ ਨਹੀਂ ਹੋ ਸਕਦੇ.