Skip to main content

Python type() Function

When learning Python, you will work with different types of data, such as numbers, text, decimal values, and Boolean values. Python provides several built-in functions to help you work with these data types. One of the most useful functions is the type() function . The type() function tells you the data type of a value or variable. It helps you understand what kind of data Python is working with and can make debugging your programs easier. For example, consider these variables: age = 20 price = 99.50 name = "Rahul" is_student = True Although all four variables store data, their data types are different. Python allows us to check these types using type() . Let's understand how it works with simple examples. 1. What Is the type() Function in Python? The type() function is a built-in Python function that returns information about the type of an object. In beginner-level programming, you can use it to check whether a value is an integer, a floating-point number, a string,...
Post a Comment

HTML Tables – Organizing Data in Rows and Columns

Tables are one of the most important elements in HTML used for displaying data in a structured format. They arrange information into rows and columns, making it easy to read and compare data.

HTML tables are widely used in:

  • School result systems

  • Timetables

  • Product comparison charts

  • Banking systems

  • Employee records

  • Reports and dashboards

  • Billing systems

In this article, we will learn:

  • HTML table basics

  • Table structure

  • Table tags

  • Rows and columns

  • Table headings

  • Table borders

  • Cell spacing and padding

  • Rowspan and colspan

  • Table captions

  • Nested tables

  • Modern table practices

  • Practical examples

What is an HTML Table?

An HTML table is used to display data in tabular form.

A table consists of:

  • Rows

  • Columns

  • Cells

Example:

NameAgeCity
Rahul20Kolkata
Aman21Delhi

HTML creates such structures using table tags.

Basic Structure of an HTML Table

HTML tables are created using:

  • <table>

  • <tr>

  • <th>

  • <td>

Table Tags and Their Uses

TagPurpose
<table>Creates table
<tr>Table row
<th>Table heading
<td>Table data
<caption>Table title
<thead>Table header section
<tbody>Table body
<tfoot>Table footer

Basic Table Syntax

<table border="1">

    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>20</td>
    </tr>

</table>

Explanation of Table Structure

<table>

Creates the complete table.

<tr>

Defines a table row.

<th>

Creates heading cells.

Text inside <th> becomes bold and centered by default.

<td>

Defines normal data cells.

First Complete Table Program

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table</title>
</head>

<body>

    <h1>Student Information</h1>

    <table border="1">

        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Marks</th>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>12</td>
            <td>89</td>
        </tr>

        <tr>
            <td>Aman</td>
            <td>11</td>
            <td>92</td>
        </tr>

    </table>

</body>

</html>

Output Structure

--------------------------------
| Name  | Class | Marks |
--------------------------------
| Rahul | 12    | 89    |
| Aman  | 11    | 92    |
--------------------------------

Table Borders

The border attribute adds borders to tables.

Example:

<table border="1">

Border Values

ValueEffect
0No border
1Thin border
2+Thicker border

Table Width and Height

You can control table size using:

  • width

  • height

Example:

<table border="1" width="500">

Cell Padding

Cell padding creates space inside cells.

Example:

<table border="1" cellpadding="10">

Effect of Cell Padding

Without padding:

  • Text touches borders

With padding:

  • Extra space appears around text

Cell Spacing

Cell spacing creates space between cells.

Example:

<table border="1" cellspacing="5">

Difference Between Padding and Spacing

FeatureMeaning
PaddingSpace inside cell
SpacingSpace between cells

Table Caption

The <caption> tag adds a title to the table.

Example:

<table border="1">

    <caption>
        Student Report
    </caption>

</table>

Complete Example with Caption

<table border="1" cellpadding="10">

    <caption>
        Employee Details
    </caption>

    <tr>
        <th>Name</th>
        <th>Department</th>
    </tr>

    <tr>
        <td>Ravi</td>
        <td>HR</td>
    </tr>

</table>

Aligning Table Content

HTML supports alignment using:

  • align

  • valign

Example:

<td align="center">
    Rahul
</td>

Horizontal Alignment Values

ValueMeaning
leftLeft aligned
centerCenter aligned
rightRight aligned

Vertical Alignment Values

ValueMeaning
topTop
middleCenter
bottomBottom

Background Colors in Tables

Example:

<table border="1" bgcolor="lightblue">

Individual Cell Color

<td bgcolor="yellow">
    Rahul
</td>

Rowspan Attribute

rowspan merges rows vertically.

Example:

<td rowspan="2">Computer</td>

Example of Rowspan

<table border="1">

    <tr>
        <th>Subject</th>
        <th>Name</th>
    </tr>

    <tr>
        <td rowspan="2">Computer</td>
        <td>Rahul</td>
    </tr>

    <tr>
        <td>Aman</td>
    </tr>

</table>

Output Structure

------------------------
| Subject  | Name     |
------------------------
| Computer | Rahul    |
|          | Aman     |
------------------------

Colspan Attribute

colspan merges columns horizontally.

Example:

<td colspan="2">Merged Cell</td>

Example of Colspan

<table border="1">

    <tr>
        <th colspan="2">
            Student Details
        </th>
    </tr>

    <tr>
        <td>Name</td>
        <td>Rahul</td>
    </tr>

</table>

Output Structure

-------------------------
|   Student Details     |
-------------------------
| Name     | Rahul      |
-------------------------

Nested Tables

A table inside another table is called a nested table.

Example:

<table border="1">

    <tr>

        <td>

            <table border="1">

                <tr>
                    <td>Inner Table</td>
                </tr>

            </table>

        </td>

    </tr>

</table>

Table Header, Body, and Footer

Modern HTML uses:

  • <thead>

  • <tbody>

  • <tfoot>

Example

<table border="1">

    <thead>
        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Rahul</td>
            <td>90</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total</td>
            <td>90</td>
        </tr>
    </tfoot>

</table>

Advantages of Using Thead, Tbody, Tfoot

  • Better structure

  • Easier styling

  • Improved accessibility

  • Better readability

Timetable Example

<!DOCTYPE html>
<html>

<head>
    <title>School Timetable</title>
</head>

<body>

    <table border="1" cellpadding="10">

        <caption>
            Weekly Timetable
        </caption>

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

        <tr>
            <td>Monday</td>
            <td>Mathematics</td>
        </tr>

        <tr>
            <td>Tuesday</td>
            <td>Computer Science</td>
        </tr>

    </table>

</body>

</html>

Product Table Example

<table border="1" cellpadding="10">

    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Status</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>50000</td>
        <td>Available</td>
    </tr>

    <tr>
        <td>Mobile</td>
        <td>20000</td>
        <td>Out of Stock</td>
    </tr>

</table>

Modern HTML Table Practices

Modern websites generally style tables using CSS instead of old HTML attributes.

CSS improves:

  • Colors

  • Borders

  • Hover effects

  • Responsiveness

  • Mobile compatibility

Companies like Microsoft and Google use advanced styled tables in dashboards and analytics systems.

Responsive Tables

Responsive tables adjust according to screen size.

Important for:

  • Mobile devices

  • Tablets

  • Small screens

Modern responsive designs are usually implemented using CSS.

Common Mistakes Beginners Make

1. Forgetting Closing Tags

Wrong:

<td>Rahul

Correct:

<td>Rahul</td>

2. Unequal Number of Columns

Wrong:

<tr>
    <td>Rahul</td>
</tr>

<tr>
    <td>Aman</td>
    <td>20</td>
</tr>

Rows should contain equal columns.

3. Using Tables for Webpage Layout

Old websites used tables for layouts.

Modern websites use:

  • CSS Flexbox

  • CSS Grid

instead of tables for page design.

Advantages of HTML Tables

  • Organizes data clearly

  • Improves readability

  • Easy comparison of information

  • Professional data presentation

  • Useful for reports and records

Real-Life Applications of Tables

Tables are used in:

  • School management systems

  • Banking applications

  • Railway reservation systems

  • E-commerce websites

  • Hospital management systems

  • Result processing systems

Platforms like Amazon and Flipkart use tables internally for product and order management.

Conclusion

HTML tables are essential for displaying structured data in webpages. They help organize information in rows and columns, making websites more professional and readable.

Comments

Post a Comment

Popular posts from this blog

Understanding Comments in Java: A Beginner’s Guide

When learning Java programming, one of the first concepts you’ll come across is comments . Comments may not affect how a program runs, but they play a crucial role in making code more understandable, readable, and maintainable. Let’s dive deeper into what comments are, why they’re important, and the different types of comments in Java. What are Comments in Java? A comment in Java is a piece of text written within a program that is ignored by the compiler . In other words, comments are notes for humans, not instructions for machines. They help developers explain the purpose of code, describe logic, or temporarily disable certain lines of code without deleting them. Why are Comments Important? 📌 Readability – Comments make code easier to understand for you and others. 📌 Maintenance – When you revisit your code after months, comments remind you what you were doing. 📌 Collaboration – In team projects, comments explain code to fellow developers. 📌 Debugging – You c...
Post a Comment
Read more

Java Program to Check Voting Eligibility

In this program, we’ll take the user’s age as input and check whether the person is eligible to vote or not. In India, the minimum age required to vote is 18 years . 💻 Program Code // Java Program to Check Voting Eligibility import java.util.Scanner; public class VotingEligibility { public static void main(String[] args) { // Create Scanner object to take input from user Scanner sc = new Scanner(System.in); // Ask user to enter age System.out.print("Enter your age: "); int age = sc.nextInt(); // Check eligibility if (age >= 18) { System.out.println("You are eligible to vote."); } else { System.out.println("You are not eligible to vote yet."); System.out.println("You can vote after " + (18 - age) + " year(s)."); } sc.close(); // Close the scanner } } 🧠 Explanation import java.util.Scanner; → Imp...
Post a Comment
Read more

Java Program to Calculate Total Marks and Average of Five Subjects

💡 Program Explanation In this program: The user will input marks of five subjects . The program will calculate the total marks and average . It will then display both results clearly. 🧑‍💻 Java Code: // Java Program to Calculate Total Marks and Average of Five Subjects import java.util.Scanner; // Importing Scanner class for user input public class TotalAndAverage { public static void main(String[] args) { // Creating Scanner object to take input from user Scanner sc = new Scanner(System.in); // Declaring variables for five subjects double subject1, subject2, subject3, subject4, subject5; // Taking marks input for each subject System.out.print("Enter marks of Subject 1: "); subject1 = sc.nextDouble(); System.out.print("Enter marks of Subject 2: "); subject2 = sc.nextDouble(); System.out.print("Enter marks of Subject 3: "); subject3 = sc.nextDo...
Post a Comment
Read more