Basic Table - Html Tutorial

In HTML, a table is used to display data in rows and columns. The <table> tag is used to create a table, and it contains rows (<tr>) and cells (<td> for data, <th> for headers).

Basic Table Structure

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
        <td>London</td>
    </tr>
</table>

Output:

Name	Age	City
Alice	25	New York
Bob	30	London

Attributes of <table> in HTML

Attribute	Description	Example
`border`	Adds a border around the table & cells	`<table border="1">`
`cellpadding`	Space inside a cell between text & border	`<table cellpadding="10">`
`cellspacing`	Space between cells	`<table cellspacing="5">`
`width`	Defines the table width (in pixels or %)	`<table width="80%">`
`height`	Defines the table height (in pixels or %)	`<table height="300px">`
`align`	Aligns the table (left, center, right)	`<table align="center">`
`bgcolor`	Sets the background color of the table	`<table bgcolor="lightblue">`

Attributes of <tr> (Table Row)

Attribute	Description	Example
`align`	Aligns text (left, center, right)	`<tr align="center">`
`bgcolor`	Sets background color for a row	`<tr bgcolor="yellow">`
`valign`	Aligns content vertically (top, middle, bottom)	`<tr valign="top">`

Attributes of <td> and <th> (Table Cells)

Attribute	Description	Example
`colspan`	Merges multiple columns	`<td colspan="2">Merged</td>`
`rowspan`	Merges multiple rows	`<td rowspan="2">Merged</td>`
`width`	Sets the width of a cell	`<td width="100px">`
`height`	Sets the height of a cell	`<td height="50px">`
`align`	Aligns text (left, center, right)	`<td align="center">`
`valign`	Aligns content vertically (top, middle, bottom)	`<td valign="top">`