HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,860
2.	Tutorial + Programming	678,587
3.	Videos	218,835
4.	Results (`Annual + Re-appear`)	12,706
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,794
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,286
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,238
13.	Downloads (Syllabus)	949

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:

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width</title>
</head>
<body>
<h2>100% wide HTML Table</h2>

<table style="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>

</body>
</html>

Live Demo & Try it yourself!

#HTML #table #width

HTML Table Column Width

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Column Width</title>
</head>
<body>
<h2>Set the first column to 70% of the table width</h2>

<table style="width:100%">
  <tr>
    <th>#</th>
    <th style="width:70%">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 #table #width #column

HTML Table Row Height

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Row Height</title>
</head>
<body>
<h2>Set the height of the second row to 100 pixels</h2>

<table style="width:100%">
  <tr>
    <th>#</th>
    <th>Name of Student</th>
    <th>Class</th>
  </tr>
  <tr style="height:100px">
    <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!