HTML <td> Tag

114    Share

HTML Table Row Height


To set the height of a specific row, add the style attribute on a table row element:


Live Demo & Try it yourself! Read More » »

HTML Table Column Width


To set the size of a specific column, add the style attribute on a <th> or <td> element:


Live Demo & Try it yourself! Read More » »

HTML Table Width


HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.


HTML Table Width

To set the width of a table, add the style attribute to the <table> element:


Live Demo & Try it yourself! Read More » »

Table With Border Color using CSS



Live Demo & Try it yourself! Read More » »

thead, tbody & tfoot Tags



Live Demo & Try it yourself! Read More » »

Setting Vertical Alignment


ਖੜਵੇ ਰੂਪ ਵਿੱਚ ਅਲਾਈਨਮੈਂਟ ਸੈੱਟ ਕਰਨਾ (Setting Vertical Alignment):

ਅਸੀਂ valign ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਿਰਫ ਸੈੱਲ-ਕੰਟੈਂਟਸ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਹੀ ਖੜਵੇਂ ਰੂਪ ਵਿੱਚ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹਾਂ। HTML ਵਿੱਚ Valign ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ <td>, <th> ਅਤੇ <tr> ਟੈਗਜ਼ ਵਿੱਚ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਵੱਖ-ਵੱਖ ਟੇਬਲ ਟੈਗਜ਼ ਲਈ valign ਐਂਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਸੰਬੰਧੀ ਜਾਣਕਾਰੀ ਇਸ ਪ੍ਰਕਾਰ ਹੈ।

<tr> ਟੈਗ ਲਈ valign ਐਟਰੀਬਿਊਟ: ਮੂਲ ਰੂਪ ਵਿੱਚ ਟੇਬਲ ਰੇਅਜ਼ ਵਿੱਚ ਸੈੱਲ ਬਾਟਾ ਨੂੰ ਖੜਕੇ ਤੌਰ ਤੇ ਸੈਂਟਰ ਵਿੱਚ ਅਲਾਈਨ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ।<tr> ਟੈਗ ਵਿੱਚ valign ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਸੀਂ ਰੋਅ ਦੇ ਸਾਰੇ ਸੈੱਲਾਂ ਲਈ ਕੰਟੈਂਟਸ ਦੀ ਖੜਵੇਂ ਰੂਪ ਵਿੱਚ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹਾਂ। ਆਮ ਤੌਰ ਤੇ <p> ਟੈਗ ਲਈ Valien ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ Top, Middle ਜਾਂ Bottom ਹੋ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ, <tr align="top">

<td> ਅਤੇ <th> ਟੈਗ ਲਈ valign ਐਟਰੀਬਿਊਣ: ਮੂਲ ਰੂਪ ਵਿੱਚ <td> ਅਤੇ <th> ਦੇ ਸੇਲ ਕੰਟੈਂਟਸ ਨੂੰ ਖੜਵੇਂ ਰੂਪ ਵਿੱਚ ਸੈਂਟਰ ਅਲਾਈਨ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਜੇ ਅਸੀਂ <d> ਜਾਂ <th> ਟੈਗਜ਼ ਵਿੱਚ vali ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਇਹ ਉਸ ਖਾਸ ਸੈੱਲ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਖੜਵੇਂ ਰੂਪ ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ ਜਿਸ ਉੱਪਰ ਇਸ ਨੂੰ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇਗਾ। ਆਮ ਤੌਰ ਤੇ <tr> ਅਤੇ <th> ਟੈਗਜ਼ ਲਈ Valign ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ Top, Middle ਜਾਂ Bottom ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ, <td valign="bottom">


Live Demo & Try it yourself! Read More » »

Changing the Alignment of a Table or Cell Value


ਇੱਕ ਟੇਬਲ ਜਾਂ ਸੈੱਲ ਕੰਟੈਂਟਸ ਦੀ ਅਲਾਈਨਮੈਂਟ ਬਦਲਣਾ (Changing the Alignment of a Table or Cell Value):

ਅਲਾਈਨਮੈਂਟ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਸੈੱਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ: ਲੇਟਵੇਂ ਰੂਪ ਵਿੱਚ (Horizontally) ਅਤੇ ਖੜਵੇਂ ਰੂਪ ਵਿੱਚ (Verically)। ਟੇਬਲ ਨੂੰ ਸਿਰਫ ਲੇਟਵੇਂ ਰੂਪ ਵਿੱਚ ਅਲਾਈਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਦੋਂ ਕਿ ਸੈੱਲ ਕੰਟੈਂਟਸ ਨੂੰ ਲੇਟਵੇਂ ਅਤੇ ਖੜਵੇਂ ਦੋਵਾਂ ਤਰੀਕਿਆਂ ਨਾਲ ਅਲਾਈਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।HTML ਟੇਬਲਾਂ ਨਾਲ ਸੰਬੰਧਤ ਵੱਖ-ਵੱਖ ਟੈਗਜ਼ ਵਿੱਚ ਅਲਾਈਨਮੈਂਟ ਸੈੱਟ ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਸੰਬੰਧੀ ਜਾਣਕਾਰੀ ਹੇਠਾਂ ਦਿੱਤੀ ਗਈ ਹੈ

ਲੇਟਵੇਂ ਰੂਪ ਵਿੱਚ ਅਲਾਈਨਮੈਂਟ ਸੈੱਟ ਕਰਨਾ (Setting Horizontal Alignment):

 

Align ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਸੀਂ ਟੇਬਲ ਅਤੇ ਇਸਦੇ ਸੈੱਲ ਕੰਟੈਂਟਸ ਦੀ ਲੇਟਵੇਂ ਰੂਪ ਵਿੱਚ ਅਲਾਈਨਮੈਂਟ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹਾਂ। HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਵੱਖ-ਵੱਖ ਟੇਬਲ ਟੈਗਜ਼ ਲਈ lien ਐਂਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਸੰਬੰਧੀ ਜਾਣਕਾਰੀ ਇਸ ਪ੍ਰਕਾਰ ਹੈ।

<table>: ਟੈਗ ਲਈ Align ਐਟਰੀਬਿਊਟ: ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) ਟੇਬਲ ਵੈੱਬ ਪੇਜਾਂ ਵਿੱਚ ਖੱਬੇ ਪਾਸੇ ਵੱਲ ਅਲਾਈਨ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। <able> ਟੈਗ ਵਿੱਚ align ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਸੀਂ ਟੇਬਲ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਲੇਟਵੀਂ ਰੂਪ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਾਂ। <table› ਟੈਗ ਲਈ align ਐਟਰੀਬਿਊਟ ਦੇ ਮੁੱਲ Right, Left, ਜਾਂ Center ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ <table align=right">

<tr> ਟੈਗ ਲਈ Align ਐਟਰੀਬਿਊਟ: ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) ਟੇਬਲ ਰੇਅਜ਼ ਵਿੱਚ ਸੈੱਲ ਡਾਟਾ ਖੱਬੇ ਪਾਸੇ ਅਲਾਈਨ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ।<> ਟੈਗ ਵਿੱਚ align ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਸੀਂ ਰੋਅ ਦੇ ਸਾਰੇ ਸੈੱਲਾਂ ਦੇ ਕੰਟੈਂਟਸ ਦੀ ਅਲਾਈਨਮੈਂਟ ਸਟਵ ਰੂਪ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਾਂ। <i> ਟੈਗ ਲਈ align ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ Right, Left, Center ਜਾਂ Justify ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ, <tr align="center">

<td> ਅਤੇ <th> ਟੈਗ ਲਈ Align ਐਟਰੀਬਿਊਟ: ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) <i> ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਤ ਸੈਲ ਕੰਟੇਂਟਸ ਖੱਬੇ ਪਾਸੇ ਅਲਾਈਨ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਜਦੋਂ ਕਿ <th> ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤ ਸੈੱਲ ਕੰਟੇਟਸ ਲਈ ਡਿਫਾਲਟ ਅਲਾਈਨਮੈਂਟ ਸੈਂਟਰ ਹੁੰਦੀ ਹੈ। ਜੇ ਅਸੀਂ <td> ਜਾਂ<th> ਟੈਗਜ਼ ਵਿੱਚ lign ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਇਹ ਉਸ ਖਾਸ ਸੈੱਲ ਦੀ ਲੇਟਵੇਂ ਰੂਪ ਵਿੱਚ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ ਜਿਸ ਤੇ ਇਹ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ। <d> ਅਤੇ <th> ਟੈਗਜ਼ ਵਿੱਚ align ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ Right, Left, Center ਜਾਂ Justify ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ <td align="center">

<caption> ਟੈਗ ਲਈ Align ਐਟਰੀਬਿਊਟ ਮੂਲ ਰੂਪ ਵਿੱਚ ਇੱਕ ਟੇਬਲ ਟਾਈਟਲ ਸੈਂਟਰ ਅਲਾਈਨਡ ਹੁੰਦਾ ਹੈ ਅਤੇ ਟੇਬਲ ਦੇ ਉੱਪਰ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। Align ਐਂਟਰੀਬਿਊਟ ਨਾਲ ਟੇਬਲ ਦੇ ਟਾਈਟਲ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਟੇਬਲ ਦੇ ਉੱਪਰ ਜਾਂ ਨਿਚਲੇ ਪਾਸੇ ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਆਮ ਤੌਰ ਤੇ <caption> ਟੈਗ ਲਈ align ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ Top ਜਾਂ Bottom ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜੇ ਅਸੀਂ align="Top" ਸੈੱਟ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਟਾਈਟਲ ਟੇਬਲ ਦੇ ਉੱਪਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਜੇ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਟਾਈਟਲ ਟੇਬਲ ਦੇ ਹੇਠਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇ ਤਾਂ ਅਸੀਂ <caption> ਟੈਗ ਲਈ align="Bottom" ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ।ਪਰੰਤੂ align ਐਟਰੀਬਿਊਟ ਨੂੰ CSS ਸਟਾਈਲਸੀਟਾਂ ਦੀ ਵੱਧ ਰਹੀ ਵਰਤੋਂ ਕਾਰਨ HTML5 ਵਿੱਚ depreciate ਕੀਤਾ ਗਿਆ ਹੈ।

ਉਦਾਹਰਣ ਲਈ, <caption align="bottom">
 


Live Demo & Try it yourself! Read More » »

Colspan in Table


ਸੈੱਲਾਂ ਨੂੰ ਮਰਜ ਕਰਨਾ (Merging Cells):

ਸੈੱਲਾਂ ਨੂੰ ਮਰਜ ਕਰਨ ਦਾ ਮਤਲਬ ਦੋ ਜਾਂ ਦੋ ਤੋਂ ਵੱਧ ਸੈੱਲਾਂ ਨੂੰ ਜੋੜ ਕੇ ਇੱਕ ਸੈੱਲ ਬਣਾਉਣਾ ਹੈ। HTML ਟੇਬਲ ਵਿੱਚ Colspan ਅਤੇ Rowspan ਐਟਰੀਬਿਊਟਸ ਦੀ ਮਦਦ ਨਾਲ ਸੈੱਲਾਂ ਨੂੰ ਮਰਜ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਐਟਰੀਬਿਊਟਸ <td> ਜਾਂ <th> ਟੈਗਜ਼ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

Colspan (ਕੋਲਸਪੈਨ): ਜੇ ਅਸੀਂ ਦੋ ਜਾਂ ਵਧੇਰੇ ਕਾਲਮਾਂ ਦੇ ਸੈੱਲਾਂ ਨੂੰ ਜੋੜ ਕੇ ਇੱਕ ਸਿੰਗਲ ਸੈੱਲ ਬਨਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ colspan ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਜਿਵੇਂ ਕਿ ਚਿੱਤਰ 3.11 ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ| Colspan ਐਟਰੀਬਿਊਟ ਦਾ ਘੱਟੋ ਘੱਟ ਮੁੱਲ 2 ਹੁੰਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ; <td colspan="3">


Live Demo & Try it yourself! Read More » »

Rowspan in Table


ਸੈੱਲਾਂ ਨੂੰ ਮਰਜ ਕਰਨਾ (Merging Cells):

Rowspan (ਰੋਅਸਪੈਨ): ਜੋ ਅਸੀਂ ਦੋ ਜਾਂ ਵਧੇਰੇ ਰੋਅਜ਼ ਦੇ ਸੈੱਲਾਂ ਨੂੰ ਜੋੜ ਕੇ ਇੱਕ ਸਿੰਗਲ ਸੈੱਲ ਬਨਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ rowspan ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ | rows pan ਐਟਰੀਬਿਊਟ ਦਾ ਘੱਟੋ ਘੱਟ ਮੁੱਲ 2 ਹੁੰਦਾ ਹੈ।


Live Demo & Try it yourself! Read More » »

Setting Cell Padding and Cell Spacing


ਸੈੱਲ ਪੈਡਿੰਗ ਅਤੇ ਸੈੱਲ ਸਪੇਸਿੰਗ ਸੈੱਟ ਕਰਨਾ ( Setting Cell Packing and Cell Spacing):

ਸੈੱਲ ਪੈਡਿੰਗ ਅਤੇ ਸੈੱਲ ਸਪੇਸਿੰਗ ਦੀ ਵਰਤੋਂ ਟੇਬਲ ਸੈੱਲਾਂ ਵਿੱਚ ਖਾਲੀ ਜਗ੍ਹਾ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਇਨ੍ਹਾਂ ਖਾਲੀ ਜਗ੍ਹਾਵਾਂ (Blank Spaces) ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਟੇਬਲ ਟੈਗਜ਼ ਵਿੱਚ ਦੋ ਐਟਰੀਬਿਊਟਸ cellpadding ਅਤੇ cellspicing ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ: • Cellpadding: ਸੈੱਲਪੈਡਿੰਗ ਟੇਬਲ ਸੈੱਲਾਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਅਤੇ ਸੈੱਲਾਂ ਦੀ ਦਿੱਖ ਵਧੀਆ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।

Cellpadding: ਸੈੱਲਾਂ ਦੇ ਅੰਦਰ ਵਾਧੂ ਜਗ੍ਹਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਇਹ ਐਟਰੀਬਿਊਟ ਸੈੱਲ ਬਾਰਡਰ (Cell Border) ਅਤੇ ਸੈੱਲ ਕੰਟੈਂਟ (Cell Content) ਦੇ ਵਿਚਕਾਰ ਦੀ ਦੂਰੀ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਮੂਲ ਰੂਪ ਵਿੱਚ ਸੇਲਪੈਡਿੰਗ “1” ਪਿਕਸਲ ਹੁੰਦੀ ਹੈ। ਉਦਾਹਰਣ ਲਈ; <table cellpadding="5">

Cellspacing : HTML ਵਿੱਚ Cellspacing ਐਂਟਰੀਬਿਊਟ <table> ਟੈਗ ਦੀ ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਣ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ। ਇਹ ਐਟਰੀਬਿਊਟ ਸੈੱਲਾਂ ਦੇ ਬਾਹਰ ਖਾਲੀ ਜਗ੍ਹਾ ਨੂੰ ਐਡਜਸਟ ਕਰਦਾ ਹੈ। Cellspacing ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਸੀਂ ਟੇਬਲ ਸੈੱਲਾਂ ਦੇ ਵਿਚਕਾਰ ਖਾਲੀ ਜਗ੍ਹਾ ਨੂੰ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹਾਂ। ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) ਸੈਲਸਪੇਸਿੰਗ 2 ਪਿਕਸਲ ਹੁੰਦੀ ਹੈ।

ਉਦਾਹਰਣ ਲਈ: <table cellspacing="5">


Live Demo & Try it yourself! Read More » »