HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,773
2.	Tutorial + Programming	678,585
3.	Videos	218,834
4.	Results (`Annual + Re-appear`)	12,693
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,768
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,282
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,236
13.	Downloads (Syllabus)	948

Setting Table Border and Border Color

ਮੂਲ ਰੂਪ ਵਿੱਚ HTML ਟੇਬਲ ਲਈ ਕੋਈ ਬਾਰਡਰ ਸੈੱਟ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ। ਇਹ <table› ਟੈਗ ਦਾ Border ਐਟਰੀਬਿਊਟ ਹੈ ਜੋ ਸਾਰੇ ਸੈੱਲਾਂ ਦਾ ਬਾਰਡਰ ਸੈੱਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਬਾਰਡਰ ਦੀ ਚੌੜਾਈ ਨੰਬਰਾਂ ਵਿੱਚ ਨਿਰਧਾਰਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਉਦਾਹਰਣ ਲਈ ਇੱਕ ਪਤਲਾ ਬਾਰਡਰ ਸੈੱਟ ਕਰਨ ਲਈ Border ਅੰਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ 1 ਸੈੱਟ ਕੀਤਾ ਜਾਵੇਗਾ। ਬਾਰਡਰ ਦੀ ਮੋਟਾਈ ਵਧਾਉਣ ਲਈ '1' ਤੇ ਵੱਡੇ ਨੰਬਰ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਜੇਕਰ ਟੇਬਲ ਬਾਰਡਰ ਲਈ horder = "0" ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਟੇਬਲ ਬਾਰਡਰ ਦਿਖਾਈ ਨਹੀਂ ਦੇਵੇਗਾ।

ਉਦਾਹਰਣ ਲਈ, <ableborder="5">.......table>

ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਇੱਕ ਟੇਬਲ ਦਾ ਮੋਟਾ ਬਾਰਡਰ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ਕਿਉਂਕਿ ਬਾਰਡਰ ਦਾ ਮੁੱਲ 5 ਸੈੱਟ ਕੀਤਾ

ਗਿਆ ਹੈ ਜੋ ਕਿ 1 ਤੋਂ ਵੱਧ ਹੈ। ਟੇਬਲ ਬਾਰਡਰ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ BorderColor ਐਂਟਰੀਬਿਊਟ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਬਾਰਡਰ ਦਾ ਰੰਗ ਉਸ ਸਮੇਂ ਹੀ ਦਿਖਾਈ ਦੇਵੇਗਾ ਜਦੋਂ ਬਾਰਡਰ ਦਾ ਮੁੱਲ "1" ਜਾਂ ਇਸਤੋਂ ਵੱਧ ਸੋਟ ਕੀਤਾ ਗਿਆ ਹੋਵੇ।

ਉਦਾਹਰਣ ਲਈ, <able border="1" bordercolor="red">.......</table>

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਟੇਬਲ ਉੱਪਰ ਇੱਕ ਪਤਲੇ ਬਾਰਡਰ ਨੂੰ ਲਾਲ ਰੰਗ ਨਾਲ ਪਰਿਭਾਸ਼ਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ HTML ਪ੍ਰੋਗਰਾਮ ਦੀ ਉਦਾਹਰਣ ਟੇਬਲ ਦੇ ਉਹਨਾਂ ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਹਨਾਂ ਦੀ ਹੁਣ ਤੱਕ ਵਿਆਖਿਆ ਕੀਤੀ ਗਈ ਹੈ:

<!DOCTYPE html>
<html>
<head>
<title>Setting Table Border and Border Color</title>
</head>
<body>
<h2>Setting Table Border and Border Color</h2>

<table border="5" bordercolor="red">
  <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>

</body>
</html>

Live Demo & Try it yourself!

#HTML #border #table #boder color

Setting Table Background

ਅਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਦੇ ਐਟਰੀਬਿਊਟਸ ਵਿੱਚ ਕਿਸੇ ਇੱਕ ਐਟਰੀਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਟੇਬਲ ਦਾ ਬੈਕਗ੍ਰਾਊਂਡ ਕਰ ਸਕਦੇ ਹਾਂ:

• Bgcolor: ਇਹ ਐਟਰੀਬਿਊਟ ਪੂਰੇ ਟੇਬਲ ਲਈ ਬੈਕਗ੍ਰਾਊਂਡ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਟੇਬਲ ਰੇਅ ਜਾਂ ਟੇਬਲ ਸੈੱਲ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਇਸ ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਰੰਗ ਦੇ ਨਾਮ (Color Name) ਜਾਂ ਹੋਕਸਾਡੈਸੀਮਲ ਕੋਡ (Hexadecimal Color Code) ਵਜੋਂ ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਉਦਾਹਰਣ ਲਈ: <table bgcolor="pink">.......</table>

• Background: ਇਹ ਐਟਰੀਬਿਊਟ ਪੂਰੇ ਟੇਬਲ ਲਈ ਜਾਂ ਸਿਰਫ ਸੈੱਲ ਲਈ ਬੈਕਗ੍ਰਾਊਂਡ ਤਸਵੀਰ ਸੈੱਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਐਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਫਾਈਲ ਐਕਸਟੈਂਸ਼ਨ ਸਮੇਤ ਤਸਵੀਰ ਦਾ URL (ਲੋਕੇਸ਼ਨ ਐਡਰੈੱਸ) ਹੁੰਦਾ ਹੈ। ਉਦਾਹਰਣ ਲਈ: <table background="back.jpg">.......</table>

ਇਹਨਾਂ ਐਟਰੀਬਿਊਟਸ ਨੂੰ HTML5 ਵਿੱਚ ਸਟਾਈਲ ਸੀਟਾਂ ਦੀ ਵੱਧ ਰਹੀ ਵਰਤੋਂ ਤਰਜੀਹ ਨਹੀਂ (deprecate) ਦਿਤੀ ਜਾਂਦੀ ਹੈ।

<!DOCTYPE html>
<html>
<head>
<title>Setting Table Background</title>
</head>
<body>
<h2>Setting Table Background</h2>

<table width="80%" border="1" background="/media/images/cat.jpg">

<caption>Student Information</caption>
  <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 bgcolor="yellow">
    <td>5.</td>
    <td>Sonia</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>6.</td>
    <td>Jaskaran Singh</td>
    <td>11th</td>
  </tr>
  <tr bgcolor="pink">
    <td>7.</td>
    <td>Arshdeep Kaur</td>
    <td>12th</td>
  </tr>
  
</table>

</body>
</html>

Live Demo & Try it yourself!

#HTML #bgcolor #background #table

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">

<!DOCTYPE html>
<html>
<head>
<title>Setting Cell Padding and Cell Spacing</title>
</head>
<body>
<h2>Setting Cell Padding and Cell Spacing</h2>

<table width="90%" border="1" cellspacing="5" cellpadding="5">
  <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>

</body>
</html>

Live Demo & Try it yourself!

#HTML #border #cellspacing #cellpadding

Rowspan in Table

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

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

<!DOCTYPE html>
<html>
<head>
<title>Rowspan in Table</title>
</head>
<body>
<h2>Rowspan in Table</h2>

<table width="90%" border="1" cellspacing="5" cellpadding="5">
    <tr><th rowspan="6">Social Media Accounts</th></tr>
    
    <tr><Td>https://www.youtube.com/GSSSKHOKHAR</Td></tr>
    <tr><Td>https://www.facebook.com/GSSSSKHOKHAR</Td></tr>
    <tr><Td>https://www.facebook.com/gss.khokhar.mks/</Td></tr>
    <tr><Td>https://www.instagram.com/gssskhokhar/</Td></tr>
    <tr><Td>https://gssskhokhar.blogspot.com/</Td></tr>
</table>

</body>
</html>

Live Demo & Try it yourself!

#HTML #table #rowspan

Colspan in Table

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Colspan in Table</title>
</head>
<body>
<h2>Colspan in Table</h2>

<table width="90%" border="1" cellspacing="5" cellpadding="5">
    <tr><th colspan="2">Social Media Accounts</th></tr>
    
    <tr>
        <Td>https://www.youtube.com/GSSSKHOKHAR</Td>
        <Td>https://www.facebook.com/GSSSSKHOKHAR</Td>
    </tr>
    <tr>
        <Td>https://www.facebook.com/gss.khokhar.mks/</Td>
        <Td>https://www.instagram.com/gssskhokhar/</Td>
    </tr>    
</table>

</body>
</html>

Live Demo & Try it yourself!

#HTML #table #colspan

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">

<!DOCTYPE html>
<html>
<head>
<title>Changing the Alignment of a Table or Cell Value</title>
</head>
<body>
<h3>Changing the Alignment of a Table or Cell Value</h3>

<table width="80%" border="1">
<caption align="bottom">Student Information (Bottom Align)</caption>
  <tr>
    <th>#</th>
    <th align="left">Name of Student</th>
    <th align="left">Class</th>
  </tr>
  <tr>
    <td align="right">1.</td>
    <td>Taranpreet Singh</td>
    <td align="center">6th</td>
  </tr>
  <tr>
    <td align="right">right align</td>
    <td align="left">left align</td>
    <td align="center">center align</td>
  </tr>
  
</table>

</body>
</html>

Live Demo & Try it yourself!

#HTML #Alignment #border #table

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">

<!DOCTYPE html>
<html>
<head>
<title>Setting Vertical Alignment</title>
</head>
<body>
<h3>Setting Vertical Alignment</h3>

<table width="80%" border="1" height="200" cellspacing="5" cellpadding="5">
<caption>Student Information</caption>
  <tr>
    <th>#</th>
    <th>Name of Student</th>
    <th>Class</th>
  </tr>
  <tr>
    <td valign="bottom">1.</td>
    <td valign="top">Taranpreet Singh</td>
    <td valign="middle">6th</td>
  </tr>
  <tr>
    <td valign="bottom">bottom valign</td>
    <td valign="top">top valign</td>
    <td valign="middle">middle valign</td>
  </tr>
  
</table>

</body>
</html>

Live Demo & Try it yourself!