HTML ਟੇਬਲ

ਤੁਸੀਂ HTML ਨਾਲ ਤਾਲਿਕਾ ਬਣਾ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਨ

ਸਤਰ
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਤਾਲਿਕਾ ਬਣਾਉਣ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤਾ ਗਿਆ ਹੈ。
ਤਾਲਿਕਾ ਬੋਰਡਰ
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਦੀਆਂ ਤਾਲਿਕਾ ਬੋਰਡਰਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤਾ ਗਿਆ ਹੈ。

(ਇਸ ਪੰਨੇ ਦੇ ਨੇੜੇ ਹੋਰ ਉਦਾਹਰਨ ਮਿਲ ਸਕਦੇ ਹਨ。

ਸਤਰ

ਤਾਲਿਕਾ <table> ਟੈਗ ਦੇ ਦੇਰੀ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦੀ ਹੈ। ਹਰੇਕ ਤਾਲਿਕਾ ਕਈ ਵਰਗ (ਜੋ ਕਿ <tr> ਟੈਗ ਦੇਰੀ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦੇ ਹਨ) ਹੁੰਦੀ ਹੈ, ਹਰੇਕ ਵਰਗ ਕਈ ਸੈੱਲ (ਜੋ ਕਿ <td> ਟੈਗ ਦੇਰੀ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦੇ ਹਨ) ਵੱਲੋਂ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ। ਅੱਖਰ td ਤਾਲਿਕਾ ਦਾ ਡਾਟਾ ਹੈ (table data), ਯਾਨੀ ਡਾਟਾ ਸੈੱਲ ਦਾ ਸਮੱਗਰੀ। ਡਾਟਾ ਸੈੱਲ ਟੈਕਸਟ, ਚਿੱਤਰ, ਸੂਚੀ, ਪੰਕਤੀ, ਫਾਰਮ, ਹਰੀਜ਼ਨ, ਤਾਲਿਕਾ ਆਦਿ ਵਗੈਰਾ ਸਮੇਤ ਹੋ ਸਕਦਾ ਹੈ。

<table border="1">
<tr>
<td>ਵਰਗ 1, ਸੈੱਲ 1</td>
<td>ਵਰਗ 1, ਸੈੱਲ 2</td>
</tr>
<tr>
<td>ਵਰਗ 2, ਸੈੱਲ 1</td>
<td>ਵਰਗ 2, ਸੈੱਲ 2</td>
</tr>
</table>

ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ:

ਵਰਗ 1, ਸੈੱਲ 1 ਵਰਗ 1, ਸੈੱਲ 2
ਵਰਗ 2, ਸੈੱਲ 1 ਵਰਗ 2, ਸੈੱਲ 2

ਤਾਲਿਕਾ ਅਤੇ ਬੋਰਡਰ ਲੈਬਲ

ਜੇਕਰ ਬੋਰਡਰ ਲੈਬਲ ਨਹੀਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤਾਲਿਕਾ ਬੋਰਡਰ ਨਹੀਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੀ ਹੈ। ਕਈ ਵਾਰ ਇਹ ਬਹੁਤ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ, ਪਰ ਮਿਆਰ ਤੌਰ 'ਤੇ ਅਸੀਂ ਬੋਰਡਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ。

ਬੋਰਡਰ ਲੈਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੋਰਡਰ ਵਾਲੀ ਤਾਲਿਕਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ:

<table border="1">
<tr>
<td>ਵਰਗ 1, ਸੈੱਲ 1</td>
<td>ਵਰਗ 1, ਸੈੱਲ 2</td>
</tr>
</table>

ਸਿਰਲੇਖ ਦੀ ਤਾਲਿਕਾ

ਸਿਰਲੇਖ ਦੇ ਤੌਰ 'ਤੇ ਤਾਲਿਕਾ ਦੀ ਵਰਤੋਂ <th> ਟੈਗ ਕਰਨ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਅਧਿਕਾਰਤ ਬਰਾਉਜ਼ਰ ਸਿਰਲੇਖ ਨੂੰ ਬੋਲਡ ਮੱਧਮ ਟੈਕਸਟ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ:

<table border="1">
<tr>
<th>ਸਿਰਲੇਖ</th>
<th>ਹੋਰ ਸਿਰਲੇਖ</th>
</tr>
<tr>
<td>ਵਰਗ 1, ਸੈੱਲ 1</td>
<td>ਵਰਗ 1, ਸੈੱਲ 2</td>
</tr>
<tr>
<td>ਵਰਗ 2, ਸੈੱਲ 1</td>
<td>ਵਰਗ 2, ਸੈੱਲ 2</td>
</tr>
</table>

ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ:

ਸਿਰਲੇਖ ਹੋਰ ਸਿਰਲੇਖ
ਵਰਗ 1, ਸੈੱਲ 1 ਵਰਗ 1, ਸੈੱਲ 2
ਵਰਗ 2, ਸੈੱਲ 1 ਵਰਗ 2, ਸੈੱਲ 2

ਸਾਰੇ ਖਾਲੀ ਕੋਸ਼ਿਚੇ

ਕੁਝ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ, ਖਾਲੀ ਸਮੱਗਰੀ ਵਾਲੇ ਸੈੱਲ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਬਹੁਤ ਚੰਗਾ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਸੈੱਲ ਖਾਲੀ ਹੈ (ਕੋਈ ਸਮੱਗਰੀ ਨਹੀਂ), ਤਾਂ ਬਰਾਉਜਰ ਉਸ ਸੈੱਲ ਦਾ ਬੋਰਡਰ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ。

<table border="1">
<tr>
<td>ਵਰਗ 1, ਸੈੱਲ 1</td>
<td>ਵਰਗ 1, ਸੈੱਲ 2</td>
</tr>
<tr>
<td></td>
<td>ਵਰਗ 2, ਸੈੱਲ 2</td>
</tr>
</table>

ਬਰਾਉਜ਼ਰ ਇਸ ਤਰ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦਾ ਹੈ:

ਸਾਰੇ ਖਾਲੀ ਕੋਸ਼ਿਚੇ

ਧਿਆਨ:ਇਸ ਖਾਲੀ ਸੈੱਲ ਦਾ ਬੋਰਡਰ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਨੂੰ ਰੋਕਣ ਲਈ, ਖਾਲੀ ਸੈੱਲ ਵਿੱਚ ਇੱਕ ਖਾਲੀ ਜਗ੍ਹਾ ਰੱਖਣ ਨਾਲ ਬੋਰਡਰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋ ਸਕਦਾ ਹੈ。

<table border="1">
<tr>
<td>ਵਰਗ 1, ਸੈੱਲ 1</td>
<td>ਵਰਗ 1, ਸੈੱਲ 2</td>
</tr>
<tr>
<td> </td>
<td>ਵਰਗ 2, ਸੈੱਲ 2</td>
</tr>
</table>

ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ:

ਵਰਗ 1, ਸੈੱਲ 1 ਵਰਗ 1, ਸੈੱਲ 2
　 ਵਰਗ 2, ਸੈੱਲ 2

ਹੋਰ ਉਦਾਹਰਨ

ਬੋਰਡਰ ਰਹਿਤ ਦਸਤਾਵੇਜ਼
本例演示一个没有边框的表格。
表格中的表头(Heading)
本例演示如何显示表格表头。
空单元格
本例展示如何使用 " " 处理没有内容的单元格。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਸਤਰ ਇਕਾਈ ਦੇ ਕਰਕੇ ਸਤਰ ਅਤੇ ਸਤਰ ਦੇ ਕਰਕੇ ਸਤਰ ਇਕਾਈ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤਾ ਗਿਆ ਹੈ
ਸਤਰ ਵਿੱਚ ਟੈਗ
ਵੱਖ-ਵੱਖ ਇਕਾਈਆਂ ਵਿੱਚ ਇਕਾਈ ਦਿਖਾਉਣਾ
ਸੈੱਲ ਪੈਡਿੰਗ (Cell padding)
ਸੈੱਲ ਪੈਡਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੈੱਲ ਸਮੱਗਰੀ ਅਤੇ ਬੋਰਡਰ ਵਿਚਕਾਰ ਦੀ ਖਾਲੀ ਸਿਰਜਿਤ ਕਰਨਾ
ਸੈੱਲ ਸਪੇਸਿੰਗ (Cell spacing)
ਸੈੱਲ ਸਪੇਸਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੈੱਲ ਵਿਚਕਾਰ ਦੀ ਦੂਰੀ ਵਧਾਉਣਾ
ਸਤਰ ਵਿੱਚ ਪ੃਷ਠ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਸਤਰ ਵਿੱਚ ਪ੃਷ਠ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ
ਸਤਰ ਇਕਾਈ ਵਿੱਚ ਪ੃਷ਠ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਜਾਂ ਵੱਧ ਸਤਰ ਇਕਾਈਆਂ ਵਿੱਚ ਪ੃਷ਠ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ
ਸਤਰ ਇਕਾਈ ਵਿੱਚ ਸਮਾਨਤਾ ਕਰਨਾ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ "align" ਗੁਣ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਤਰ ਇਕਾਈਆਂ ਦੇ ਸਮਾਨਤਾ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਕਿ ਸਤਰ ਦਾ ਸੁੰਦਰ ਸਤਰ ਬਣਾਇਆ ਜਾ ਸਕੇ。
ਫਰੇਮ (frame) ਗੁਣ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ "frame" ਗੁਣ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਤਰ ਦੇ ਚੱਕਰ ਦੇ ਚੱਕਰ ਨੂੰ ਕਿਵੇਂ ਕੰਟਰੋਲ ਕਰਨ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤਾ ਗਿਆ ਹੈ。

ਸਤਰ ਟੈਗ

ਸਤਰ ਵਰਣਨ
<table> ਸਤਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<caption> ਸਤਰ ਦੀ ਟਾਈਟਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<th> ਸਤਰ ਦਾ ਮੁੱਖ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<tr> ਸਤਰ ਦੀ ਪੰਨੀ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<td> ਸਤਰ ਇਕਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<thead> ਸਤਰ ਦਾ ਮੁੱਖ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<tbody> ਸਤਰ ਦਾ ਮੁੱਖ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<tfoot> ਸਤਰ ਦੀ ਪੰਨੀ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<col> ਸਤਰਾਂ ਲਈ ਵਰਤਿਆ ਗਿਆ ਗੁਣ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。
<colgroup> ਸਤਰਾਂ ਦੇ ਗਰੁੱਪ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ。