• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Tables

← Previous Next →

🔹 What is a Table in HTML?

An HTML table allows you to arrange data in rows and columns, just like in Excel. Tables are useful for displaying structured information such as price lists, schedules, or statistics.

🔹 Basic Table Structure
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Tag Description
<table> Defines the table
<tr> Table row
<th> Table header cell (bold & centered)
<td> Table data cell
🔹 Example: Basic Table
<table border="1">
  <tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bob</td>
    <td>89</td>
  </tr>
</table>

🔹 Table Border & Styling

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #444;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

🔹 Adding colspan and rowspan

colspan: Merge columns
<td colspan="2">Merged Column</td>
rowspan: Merge rows
<td rowspan="2">Merged Row</td>

🔹 Caption for Table

<table>
  <caption>Student Marks</caption>
  ...
</table>

🔹 Responsive Table (Scroll on small screens)

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Practice Questions

Q1. Create a basic table with 2 rows and 2 columns.

Q2. Add column headers to a table using <th>.

Q3. Display a student result table with Roll No, Name, and Marks.

Q4. Style a table with border and padding using CSS.

Q5. Merge two columns using colspan.

Q6. Merge two rows using rowspan.

Q7. Add a caption titled “Employee Details” to a table.

Q8. Create a table inside a scrollable div.

Q9. Create a 3×3 multiplication table using HTML.

Q10. Display a monthly calendar using table rows and columns.

HTML Tables Quiz

Q1: Which tag is used to define a table in HTML?

A. <tbl>
B. <tab>
C. <table>
D. <tdata>

Q2: Which tag is used to define a row in a table?

A. <row>
B. <td>
C. <tr>
D. <th>

Q3: What does the <th> tag represent?

A. Table height
B. Table row
C. Table heading cell
D. Table footer

Q4: Which attribute is used to merge two columns?

A. rowspan
B. merge
C. colspan
D. span

Q5: Which tag is used for table data (cells)?

A. <td>
B. <tr>
C. <th>
D. <caption>

Q6: What is the default alignment of text in <th>?

A. Right
B. Center
C. Left
D. Justify

Q7: Which tag is used to give a title to the table?

A. <thead>
B. <heading>
C. <caption>
D. <title>

Q8: What happens when you apply border-collapse: collapse to a table?

A. Removes table borders
B. Adds padding
C. Merges adjacent borders
D. Hides the table

Q9: Which CSS property is used to make a table scrollable on small screens?

A. position: fixed;
B. overflow-x: auto;
C. display: flex;
D. width: 100vh;

Q10: Which of the following tags is optional in a table?

A. <tr>
B. <td>
C. <table>
D. <caption>
← Previous Next →
Login
Go Back Top