HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
ਟੇਬਲ ਇੱਕ ਅਜਿਹੀ ਬਣਤਰ (Structure) ਹੁੰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਡਾਟਾ ਨੂੰ ਰੋਅਜ਼ (Rows) ਅਤੇ ਕਾਲਮਾਂ (Columns) ਵਿੱਚ ਵਿਵਸਥਿਤ ਕੀਤੀ ਜਾਂਦਾ ਹੈ। ਟੇਬਲਾਂ ਦੀ ਜ਼ਿਆਦਾਤਰ ਵਰਤੋਂ ਡਾਟਾ ਨੂੰ ਟੇਬਲ ਦੇ ਰੂਪ (Tabular Form) ਵਿੱਚ ਪ੍ਰਸਤੁੱਤ ਕਰਨ ਲਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਕਿ ਡਾਟਾ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ (Data Analysis) ਅਤੇ ਖੋਜ ਕਾਰਜਾਂ (Research Work) ਆਦਿ ਨਾਲ ਸੰਬੰਧਤ ਕੰਮ ਆਸਾਨੀ ਨਾਲ ਕੀਤੇ ਜਾ ਸਕਣ। ਟੇਬਲ ਵਿੱਚ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਅਸਾਨੀ ਨਾਲ ਪੜ੍ਹਨਯੋਗ (Readable) ਅਤੇ ਸਮਝਣ ਯੋਗ (Understandable) ਹੁੰਦੀ ਹੈ। ਟੇਬਲਜ਼ ਲੰਮੀ (Lengthy) ਅਤੇ ਵਿਆਪਕ (Extensive) ਜਾਣਕਾਰੀ ਨੂੰ ਕੰਪਾਈਲ ਕਰਨ ਦਾ ਇੱਕ ਵਧੀਆ ਢੰਗ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਸਾਰੇ ਪ੍ਰਸਿੱਧ ਵੈੱਬ-ਬਾਉਜ਼ਰ ਟੇਬਲਾਂ ਨੂੰ ਸਪੋਰਟ (Support) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
HTML ਟੇਬਲ ਵੈੱਬ ਲੇਖਕਾਂ (Web Authors) ਨੂੰ ਟੈਕਸਟ, ਤਸਵੀਰਾਂ, ਲਿੰਕ ਆਦਿ ਵਰਗੇ ਡਾਟਾ ਨੂੰ ਰੋਅਜ਼ ਅਤੇ ਕਾਲਮਾਂ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਰੋਅਜ਼ ਅਤੇ ਕਾਲਮਾਂ ਦੇ ਅੰਤਰ-ਵਿਭਾਗੀ (Cross- Sectional) ਖੇਤਰ ਨੂੰ ਸੈੱਲ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਨ੍ਹਾਂ ਸੈੱਲਾਂ ਵਿੱਚ ਟੇਬਲ ਦੇ ਕੰਟੈਂਟਸ ਦਿਖਾਏ ਜਾਂਦੇ ਹਨ। HTML ਡਾਕੂਮੈਂਟਸ ਵਿੱਚ ਟੇਬਲ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੇ ਟੈਗਜ਼ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ
<TABLE> : HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਇੱਕ ਟੇਬਲ ਬਣਾਉਣ ਲਈ <TABLE> ਟੈਗ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਇੱਕ ਪੇਅਰਡ ਕੰਟੇਨਰ ਟੈਗ ਹੈ। ਹਰੇਕ <table> ਟੈਗ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ <TABLE> ਟੰਗ ਨਾਲ ਖਤਮ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਡਾਟਾ ਸਮੇਤ ਸਾਰੀਆਂ ਰੋਅਜ਼ ਅਤੇ ਕਾਲਮਜ਼ <TABLE>...<TABLE> ਟੈਗਜ਼ ਦੇ ਵਿਚਕਾਰ ਪਰਿਭਾਸ਼ਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
<TR> : TR ਦਾ ਅਰਥ ਹੈ ਟੇਬਲ ਰੋਅ (Table Row)। ਇਹ ਟੈਗ <table> ਵਿੱਚ ਇੱਕ ਕਤਾਰ/ਰੋਅ (Row) ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਟੈਗ ਵੀ ਇੱਕ ਪੇਅਰਡ/ਕੰਟੇਨਰ ਟੈਗ ਹੈ। ਟੇਬਲ ਦੀ ਹਰ ਰੇਅ <TR> ਟੈਗ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਅਤੇ </TR> ਟੈਗ ਨਾਲ ਖਤਮ ਹੁੰਦੀ ਹੈ। ਟੇਬਲ ਹੈਡਿੰਗ (<TH>) ਅਤੇ ਟੇਬਲ ਡਾਟਾ (<ID>) ਨੂੰ <TR> ਅਤੇ <TR> ਟੈਗਸ ਵਿਚਕਾਰ ਪਰਿਭਾਸ਼ਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਟੇਬਲ ਦੀ ਹਰੇਕ ਰੋਅ ਲਈ ਇੱਕ ਵੱਖਰਾ <TR> ... <TR> ਟੈਗ <TABLE> ਟੈਗ ਵਿੱਚ ਪਰਿਭਾਸ਼ਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
<TH> :TH ਦਾ ਅਰਥ ਹੈ ਟੇਬਲ ਹੈਡਿੰਗ (Table Heading)। ਇਹ ਟੈਗ ਟੇਬਲ ਹੈਡਿੰਗਜ਼ (ਕਾਲਮਾਂ ਦੇ ਨਾਂ) ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਵੀ ਇੱਕ ਪੇਅਰਡ/ਕੰਟੇਨਰ ਟੈਗ ਹੈ ਜੋ <TH> ਟੈਗ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ </TH> ਟੈਗ ਨਾਲ ਖਤਮ ਹੁੰਦਾ ਹੈ। ਹਰੇਕ ਟੇਬਲ ਹੈਡਿੰਗ (ਕਾਲਮ ਦੇ ਨਾਂ) ਲਈ <TH TH> ਟੈਗਜ਼ ਦਾ ਇੱਕ ਵੱਖਰਾ ਸੁਮੇਲ (Combination) ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਟੈਗਜ਼ <TR> ਅਤੇ TRS ਟੈਗਜ਼ ਦੇ ਵਿਚਕਾਰ ਪਰਿਭਾਸ਼ਤ ਹੋਣ ਚਾਹੀਦੇ ਹਨ। ਆਮ ਤੌਰ 'ਤੇ ਅਸੀਂ ਟੇਬਲ ਦੀ ਸਿਖਰਲੀ ਡੇਅ (Top Row) ਨੂੰ ਟੇਬਲ ਹੈਡਿੰਗ ਵਜੋਂ ਵਰਤਦੇ ਹਾਂ, ਪਰ ਅਸੀਂ ਕਿਸੇ ਵੀ ਰੋਅ ਵਿੱਚ ਮ> ਟੈਗਜ਼ ਦੀ ਵਰਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) ਟੇਬਲ ਹੈਡਿੰਗਜ਼ ਬੋਲਡ ਅਤੇ ਸੈੱਲ ਦੇ ਸੈਂਟਰ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ।
<TD> : TD ਦਾ ਅਰਥ ਹੈ ਟੇਬਲ ਡਾਟਾ (Table Data) । ਇਹ ਟੈਗ ਸੈੱਲ ਦੇ ਕੰਟੇਂਟਸ/ਡਾਟਾ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਵੀ ਇੱਕ ਪੇਅਰਡ/ਕੰਟੇਨਰ ਟੈਗ ਹੈ। ਸੈਲ ਕੰਟੈਂਟ/ਡਾਟਾ ਨੂੰ <TD> ਅਤੇ /TD> ਟੈਗਜ਼ ਵਿਚਕਾਰ ਪਰਿਭਾਸ਼ਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਟੈਗਜ਼ <TR> ਅਤੇ </TR> ਟੈਗਜ਼ ਦੇ ਵਿਚਕਾਰ ਪਰਿਭਾਸ਼ਤ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। <TD> ਟੈਗ ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਕੰਟੈਂਟ ਨਿਯਮਿਤ (Regular) ਅਤੇ ਮੂਲ ਰੂਪ ਵਿੱਚ (By default) ਸੈੱਲ ਦੇ ਖੱਬੇ ਪਾਸੇ ਵੱਲ ਅਲਾਈਨ (Left:Aligned) ਹੁੰਦੇ ਹਨ।
<CAPTION> : <CAPTION> ਟੈਗ ਟੇਬਲ ਦੇ ਟਾਈਟਲ (Title) ਜਾਂ ਵਿਆਖਿਆ (Explanatics) ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਟੇਬਲ ਦੇ ਉੱਪਰਲੇ ਪਾਸੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਮੂਲ ਰੂਪ ਵਿੱਚ ਇੱਕ ਟੇਬਲ ਟਾਈਟਲ ਸੈਂਟਰ-ਅਲਾਈਨਡ ਹੁੰਦਾ ਹੈ। <CAPTION> ਟੈਗ <TABLE> ਟੈਗ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਤੁਰੰਤ ਬਾਅਦ ਲਿਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਟੈਗ ਟੇਬਲ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਲਾਜ਼ਮੀ ਨਹੀਂ ਹੁੰਦਾ; ਜੇਕਰ ਅਸੀਂ ਟੇਬਲ ਲਈ ਕਿਸੇ ਟਾਈਟਲ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਸਿਰਫ ਤਾਂ ਹੀ ਅਸੀਂ ਇਸ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ। ਹੇਠਾਂ ਇੱਕ ਸਧਾਰਨ ਟੇਬਲ ਦੀ ਉਦਾਹਰਣ ਦਿੱਤੀ ਗਈ ਹੈ:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<h2>A basic HTML table</h2>
<table border="1" width="100%">
<tr>
<th>#</th>
<th>Name of Student</th>
<th>Class</th>
</tr>
<tr>
<td>1.</td>
<td>Taranpreet Singh</td>
<td>6th</td>
</tr>
<tr>
<td>2.</td>
<td>Mehakpreet Kaur</td>
<td>7th</td>
</tr>
<tr>
<td>3.</td>
<td>Veerpal Kaur</td>
<td>8th</td>
</tr>
<tr>
<td>4.</td>
<td>Jasmeen</td>
<td>9th</td>
</tr>
<tr>
<td>5.</td>
<td>Sonia</td>
<td>10th</td>
</tr>
<tr>
<td>6.</td>
<td>Jaskaran Singh</td>
<td>11th</td>
</tr>
<tr>
<td>7.</td>
<td>Arshdeep Kaur</td>
<td>12th</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Output
