Day-6 Creating Tables
Table formatting tag in html :
A table in HTML consists of table cells inside rows and columns.
In html <table> table tag contains the total structure of table .
<tr>,<td> and <th> tags are used while creating a table.
<table>
The whole table information is present inside the table open tag and close tag</table>
Table Cells<td>
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows(<tr>)
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Note: There are times when a row can have less or more cells than another.
Table Headers <th>
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
By default, the text in <th> elements are bold and centered, but you can change that with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Table of IPL Statastics</h1>
<table border="1">
<tr>
<th>sno</th>
<th>name</th>
<th>centuries</th>
<th>score</th>
<th>jercey</th>
</tr>
<tr>
<td>1</td>
<td>dhoni</td>
<td rowspan="2">7</td>
<td>1800</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td><b>Rishab</b></td>
<td colspan="2">Don't know</td>
</tr>
</table>
</body>
</html>
HTML Table Tags
Attributes in table :
HTML Table Borders
HTML tables can have borders of different styles and shapes.
How To Add a Border
To add a border, use the CSS border property on table, th, and td elements:
<head>
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
<table style="width:100%">
Align Table Headers
By default, table headers are bold and centered:
to left-align the table headers, use the CSS text-align property:
th {
text-align: left;
}
Header for Multiple Columns
<th colspan="2">Name</th>
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:
table {
border-spacing: 30px;
}
HTML Table Colspan & Rowspan
To make a cell span over multiple columns, use the colspan attribute:
<th colspan="2">Name</th>
To make a cell span over multiple rows, use the rowspan attribute:
<th rowspan="2">Phone</th>
#note-To style every other table row element, use the :nth-child(even) selector like this:
tr:nth-child(even) {
background-color: #D6EEEE;
}