HTML Tables

HTML CODES & EXAMPLES

HTML Tables

Learn how to create structured tables in HTML using rows, headings, cells, captions, column spans, row spans and semantic table sections.

← HTML Lists Start Learning →

What is an HTML Table?

Organize data in rows and columns

HTML tables are used to present structured data in rows and columns. They are useful for displaying student results, course schedules, fee structures, product information and other tabular data.

A basic table is created with the <table> element and contains rows using <tr>, headings using <th> and data cells using <td>.

Basic HTML Table

Create your first table

basic-table.html

<table>

  <tr>
    <th>Name</th>
    <th>Course</th>
    <th>Duration</th>
  </tr>

  <tr>
    <td>Rahul</td>
    <td>DCA</td>
    <td>6 Months</td>
  </tr>

  <tr>
    <td>Priya</td>
    <td>ADCA</td>
    <td>12 Months</td>
  </tr>

</table>

Table Rows

Understanding the tr element

The <tr> element defines a row inside an HTML table.

table-row.html

<table>

  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>

  <tr>
    <td>CSS</td>
    <td>Intermediate</td>
  </tr>

</table>

Table Headings

Create column headings with th

table-heading.html

<table>

  <tr>

    <th>Student Name</th>
    <th>Course</th>
    <th>Status</th>

  </tr>

</table>

Table Data

Add information using td

table-data.html

<tr>

  <td>Manoj Yadav</td>
  <td>DCA</td>
  <td>Active</td>

</tr>

Table Border with CSS

Make table structure visible

table-border.html

<table class="basic-table">

  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>

  <tr>
    <td>CCA</td>
    <td>3 Months</td>
  </tr>

</table>


<style>

.basic-table{
  width:100%;
  border-collapse:collapse;
}

.basic-table th,
.basic-table td{
  border:1px solid #dce3ec;
  padding:12px;
  text-align:left;
}

</style>

Table Caption

Give your table a meaningful title

thead, tbody and tfoot

Organize table content semantically

semantic-table.html

<table>

  <thead>

    <tr>
      <th>Course</th>
      <th>Fee</th>
    </tr>

  </thead>


  <tbody>

    <tr>
      <td>CCA</td>
      <td>₹2,000</td>
    </tr>

    <tr>
      <td>DCA</td>
      <td>₹5,000</td>
    </tr>

  </tbody>


  <tfoot>

    <tr>
      <td>Total</td>
      <td>₹7,000</td>
    </tr>

  </tfoot>

</table>

Colspan

Merge multiple columns

colspan.html

<table>

  <tr>

    <th colspan="3">
      Student Information
    </th>

  </tr>

  <tr>
    <th>Name</th>
    <th>Course</th>
    <th>Status</th>
  </tr>

</table>

colspan=”3″ makes one cell span across three columns.

Rowspan

Merge multiple rows

rowspan.html

<table>

  <tr>

    <th rowspan="2">
      Computer Courses
    </th>

    <td>CCA</td>

  </tr>


  <tr>

    <td>DCA</td>

  </tr>

</table>

rowspan=”2″ makes the cell occupy two rows.

Student Result Table

Practical education website example

student-result.html

<table class="result-table">

  <caption>
    Student Examination Result
  </caption>

  <thead>

    <tr>
      <th>Student</th>
      <th>Course</th>
      <th>Marks</th>
      <th>Result</th>
    </tr>

  </thead>


  <tbody>

    <tr>
      <td>Rahul Kumar</td>
      <td>DCA</td>
      <td>82%</td>
      <td>Pass</td>
    </tr>

    <tr>
      <td>Priya Sharma</td>
      <td>ADCA</td>
      <td>91%</td>
      <td>Pass</td>
    </tr>

  </tbody>

</table>

Course Fee Table

Display course pricing

course-fee.html

<table>

  <tr>
    <th>Course</th>
    <th>Duration</th>
    <th>Fee</th>
  </tr>

  <tr>
    <td>CCA</td>
    <td>3 Months</td>
    <td>₹2,000</td>
  </tr>

  <tr>
    <td>DCA</td>
    <td>6 Months</td>
    <td>₹5,000</td>
  </tr>

  <tr>
    <td>ADCA</td>
    <td>12 Months</td>
    <td>₹8,000</td>
  </tr>

</table>

Class Schedule Table

Display a weekly timetable

class-schedule.html

<table>

  <tr>
    <th>Day</th>
    <th>Subject</th>
    <th>Time</th>
  </tr>

  <tr>
    <td>Monday</td>
    <td>Computer Fundamentals</td>
    <td>10:00 AM</td>
  </tr>

  <tr>
    <td>Wednesday</td>
    <td>Microsoft Excel</td>
    <td>11:00 AM</td>
  </tr>

  <tr>
    <td>Friday</td>
    <td>Internet & Email</td>
    <td>10:00 AM</td>
  </tr>

</table>

Premium Styled Table

Modern responsive table design

Responsive Table

Make wide tables usable on mobile

responsive-table.html

<div class="table-container">

  <table>

    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Fee</th>
      <th>Mode</th>
    </tr>

    <tr>
      <td>DCA</td>
      <td>6 Months</td>
      <td>₹5,000</td>
      <td>Online</td>
    </tr>

  </table>

</div>


<style>

.table-container{
  width:100%;
  overflow-x:auto;
}

.table-container table{
  width:100%;
  min-width:650px;
  border-collapse:collapse;
}

.table-container th,
.table-container td{
  padding:12px;
  border:1px solid #ddd;
}

</style>

Important Table Elements

Quick reference

<table>

Creates a table

<table>

<tr>

Creates a table row

<tr>

<th>

Creates a table heading

<td>

Creates table data

Defines table title

<thead>

Groups table headings

<thead>

<tbody>

Groups table body

<tbody>

<tfoot>

Groups table footer

<tfoot>

colspan

Merges columns

colspan=”2″

rowspan

Merges rows

rowspan=”2″

Live HTML Example

Run the complete HTML table example

LIVE PREVIEW

Practice Task

Test your HTML table skills

🎯 Create a Student Result Table

Build a complete student result table using HTML.

Add Student Name, Roll Number, Course, Marks and Result columns.
Use <thead> and <tbody>.
Add at least five student records.
Add a table caption.
Use CSS borders and spacing.
Make the table responsive on mobile devices.
Add a footer showing the total or average marks.

`;document.getElementById( "sncecTablesPreview" ).srcdoc = code;}/* ========================= AUTO RUN ========================= */document.addEventListener( "DOMContentLoaded", function(){sncecTablesRun();} );

SNCEC PORTAL