HTML Tables
Now we have not given examples for everyone but will update soon
HTML Table Example
NAME ID No AGE
JOHN 2323 34
RAM 3565 24
SALMAN 2665 25
NARESH 3423 43
MAHESH 3245 32
SEKH 3343 27
Defining HTML Table
HTML table is defined with <table> tag.
Each table row is defined with the is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with <td> tag.
Example
<table style=”width:100%”>
<tr>
<th>प्रथमनाम </th>
<th>उपनाम </th>
<th>आयु </th>
</tr>
<tr>
<td>सलमान </td>
<td>खान </td>
<td>50</td>
</tr>
<tr>
<td>राम </td>
<td>सिंह </td>
<td>94</td>
</tr>
</table>
Note: <td> elements are the data containers of the table.
They can contain all types of HTML elements like; text, images, lists, other tables, etc.
HTML Table – Adding Border
If you do not SPECIFY the border for the table, it will be displayed without borders.
A border is set using the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Remember to define borders for both table and table cells.
HTML Table – Collapsed((of a structure) fall down or in) Borders
If you want the borders to collapse into a single border, you will need to add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table – Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
a If you do not specify padding, then table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
HTML Table – Left-align Headings
By default, table headings are bold and centered.
To left-align table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
HTML Table – Adding Border Spacing
Border spacing specifies the space between cells.
To set the border spacing for the table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
Note: If the table is collapsed by borders, then border-spacing will have no effect.
HTML Table – Cells that Span Multiple Columns
To make a cell span multiple columns, use the colspan attribute:
Example
<table style=”width:100%”>
<tr>
<th>नाम </th>
<th colspan=”2″>मोबाइल </th>
</tr>
<tr>
<td>युसूफ </td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML Table – Cells that Span Multiple Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<table style=”width:100%”>
<tr>
<th>नाम :</th>
<td>परमिंदर </td>
</tr>
<tr>
<th rowspan=”2″>मोबाइल :</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Table – Adding Caption
To add a caption to a table, use the <caption> tag:
Example
<table style=”width:100%”>
<caption>परिचय पत्र </caption>
<tr>
<th>नाम </th>
<th>आईडी </th>
</tr>
<tr>
<td>रोहन </td>
<td>4645</td>
</tr>
<tr>
<td>सोहन </td>
<td>6550</td>
</tr>
</table>
Note: <caption> tag should be inserted immediately after <table> tag.
Special Style for a Table
To define a for a for a special table, add id attribute to the table to define the special style:
Example
<table id=”t01″>
<tr>
<th>प्रथमनाम </th>
<th>उपनाम </th>
<th>आयु </th>
</tr>
<tr>
<td>राम </td>
<td>जॉनसन</td>
<td>64</td>
</tr>
</table>
You can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Chapter Summary
Use the HTML <table> element to define a table
Use HTML <tr> element to define table row
HTML <td> element to define a table data
Use HTML <th> element to define table heading
Use HTML <caption> element to define table caption
Use CSS border property to define border
Use CSS border-collapse property to collapse cell borders
Use CSS padding property to add padding to cells
Use CSS text-align property to align cell text
Use CSS border-spacing property to set spacing between cells
Use the colspan attribute to make multiple columns a cell span.
Use the rowspan attribute to make multiple rows a cell span.
Use id attribute to define table uniquely
HTML Table Tags
Tag details
<table> to define the table
<th> to define in header cell table
<tr> to define a row in a table
To define cell in <td> table
<caption> Defines the table caption
<colgroup> specifies a group of one or more columns in the table for formatting.
<col> Specifies column properties for each column within the <colgroup> element.
<thead> groups the header content into a table
<tbody> Groups the body content into a table
<tfoot> groups the footer content into a table.
For a complete list of all available html tags, click HTML Tag Reference.