ਇੱਕ ਸਾਰਣੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ 'ਡਿਸਪਲੇ' ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ?
ਹੇਠਾਂ ਦਿੱਤੀ ਸਾਰਣੀ ਤੁਹਾਨੂੰ ਉਸੇ ਤੱਤ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ' ਟੇਬਲ ' ਟੈਗ ਅਤੇ ਸੰਬੰਧਿਤ ਸਮਰਥਿਤ CSS ਪ੍ਰਾਪਰਟੀ ਵਿਚਕਾਰ ਸਬੰਧ ਦਿੰਦੀ ਹੈ । ਇਸ ਲਈ, ਜਦੋਂ ਇੱਕ ਸਾਰਣੀ ਬਣਾਉਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਸਿਰਫ਼ HTML ' ਟੇਬਲ ' ਟੈਗ ਦੀ ਬਜਾਏ, ਸਿਰਫ਼ ' div ' ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇੱਕ ਸਾਰਣੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਬੰਧਿਤ CSS ਜੋੜੋ।
<ਟੇਬਲ> | {ਡਿਸਪਲੇ: ਟੇਬਲ} |
<tr> | {ਪ੍ਰਦਰਸ਼ਨ: ਸਾਰਣੀ-ਕਤਾਰ} |
<thead> | {ਡਿਸਪਲੇ: ਟੇਬਲ-ਸਿਰਲੇਖ-ਸਮੂਹ} |
<tbody> | {ਪ੍ਰਦਰਸ਼ਨ: ਸਾਰਣੀ-ਕਤਾਰ-ਸਮੂਹ} |
<tfoot> | {ਡਿਸਪਲੇ: ਟੇਬਲ-ਫੂਟਰ-ਗਰੁੱਪ} |
<col> | {ਪ੍ਰਦਰਸ਼ਨ: ਸਾਰਣੀ-ਕਾਲਮ} |
<colgroup> | {ਡਿਸਪਲੇ: ਟੇਬਲ-ਕਾਲਮ-ਗਰੁੱਪ} |
<td>, <th> | {ਡਿਸਪਲੇ: ਟੇਬਲ-ਸੈੱਲ} |
<ਕੈਪਸ਼ਨ> | {ਡਿਸਪਲੇ: ਟੇਬਲ-ਕੈਪਸ਼ਨ} |
ਕਦਮ 1: ਟੇਬਲ ਲਈ ਮਾਸਟਰ ਡਿਵ ਬਣਾਓ
HTML
CSS
ਕਦਮ 3: ਇੱਕ ਸਾਰਣੀ ਸਿਰਲੇਖ, ਸਿਰਲੇਖ, ਬਾਡੀ, ਫੁੱਟਰ ਬਣਾਓ
HTML
CSS
ਸਟੈਪ3: ਟੇਬਲ ਕਤਾਰਾਂ, ਸੈੱਲ, ਹੈੱਡ-ਸੈੱਲ, ਫੁੱਟ-ਸੈੱਲ ਬਣਾਓ
HTML
CSS
ਨਤੀਜਾ
ਕਦਮ 4: ਟੇਬਲ ਵਿੱਚ ਸਕ੍ਰੋਲ ਬਾਰ ਸ਼ਾਮਲ ਕਰੋ
HTML
CSS
ਜੇ.ਐਸ