• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top