- Introduction To HTML
- HTML Editors
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Tables
HTML Tables
Web developers can organise data into rows and columns using HTML tables.
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Mytat</td>
<td>Jai</td>
<td>India</td>
</tr>
<tr>
<td>Wipro</td>
<td>Jyoti</td>
<td>India</td>
</tr>
<tr>
<td>TCS</td>
<td>Rohit</td>
<td>India</td>
</tr>
<tr>
<td>Google</td>
<td>Helen Bennett</td>
<td>India</td>
</tr>
</table>
</body>
</html>
Define An HTML Table
An HTML table is defined using the <table>
tag.
A <tr>
tag is used to define each table row. A <th>
tag is used to define each table header. A <td>
tag is used to define each table's data or cell.
The text in <th> elements is bold and centred by default.
Regular and left-aligned text is the default for <td>
elements.
<html>
<head>
</head>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>25</td>
</tr>
<tr>
<td>Diya</td>
<td>Singh</td>
<td>16</td>
</tr>
<tr>
<td>Ravi</td>
<td>Gupta</td>
<td>30</td>
</tr>
</table>
</body>
</html>
HTML Table - Add A Border
Use the CSS border property to border a table:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border </h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>25</td>
</tr>
<tr>
<td>Diya</td>
<td>Singh</td>
<td>16</td>
</tr>
<tr>
<td>Ravi</td>
<td>Gupta</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Table - Collapsed Borders
Add the CSS border-collapse attribute to allow the borders to merge into one border.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>25</td>
</tr>
<tr>
<td>Diya</td>
<td>Singh</td>
<td>16</td>
</tr>
<tr>
<td>Ravi</td>
<td>Gupta</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Table - Add Cell Padding
The distance between the content of a cell and its borders is defined by its cell padding.
The table cells will be presented without padding if you don't specify any.
Use the CSS padding property to set the padding:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>25</td>
</tr>
<tr>
<td>Diya</td>
<td>Singh</td>
<td>16</td>
</tr>
<tr>
<td>Ravi</td>
<td>Gupta</td>
<td>30</td>
</tr>
</table>
<p><strong>Tip:</strong> Try to change the padding to 5px.</p>
</body>
</html>
Table - Left-align Headings
Table heads are bold and centred by default.
Use the CSS text-align property to position the table heads to the left:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>25</td>
</tr>
<tr>
<td>Diya</td>
<td>Singh</td>
<td>16</td>
</tr>
<tr>
<td>Ravi</td>
<td>Gupta</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Table - Add Border Spacing
The distance between the cells is defined by the border spacing.
Use the CSS border-spacing property to modify a table's border spacing:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>25</td>
</tr>
<tr>
<td>Diya</td>
<td>Singh</td>
<td>16</td>
</tr>
<tr>
<td>Ravi</td>
<td>Gupta</td>
<td>30</td>
</tr>
</table>
<p><strong>Tip:</strong> Try to change the border-spacing to 5px.</p>
</body>
</html>
Table - Cell That Spans Many Columns
Use the colspan attribute to make a cell span multiple columns:
<tr>
<th>Name</th>
<th colspan="2">Telephone /number</th>
</tr>
<tr>
<td>Bharat</td>
<td>55887854</td>
<td>55777855</td>
</tr>
</table>
Table - Cell That Spans Many Rows
You may use the rowspan attribute to have a cell span many rows:
<html>
<head>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Table - Add A Caption
Use the <caption>
tag to include a caption in a table:
<html>
<head>
</head>
<body>
<table style="width:100%">
<caption>Monthly savings schemes</caption>
<tr>
<th>Month</th>
<th>Savings schemes</th>
</tr>
<tr>
<td>January</td>
<td>rs.1000</td>
</tr>
<tr>
<td>February</td>
<td>rs.500</td>
</tr>
</table>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP