Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a table in HTML
For defining tables in HTML <table> tag is used. It contains other tags which define the structure of the table. Each row in a table is defines with <tr> tag, it has open and close tags like <tr> </tr>
The table header can be represented by using <th> tag, it also contains open and close tag <th> </th>. The data in each cell is defined with <td> tag. It provides open and close tags. <td> </td>
The following are the attributes −
Attribute |
Value |
Description |
|---|---|---|
abbr |
abbreviated_text |
Deprecated − Specifies an abbreviated version of the content in a cell. |
align |
align Right, left, center, justify, char |
Deprecated − Visual alignment |
bgcolor |
rgb(x,x,x)#hexcode color name |
Deprecated − Specifies the background color of the table. |
border |
Pixels |
Deprecated − Specifies the border width. A value of "0" means no border. |
cellpadding |
pixels or % |
Deprecated − Specifies the space between the cell borders and their contents. |
cellspacing |
pixels or % |
Deprecated − Specifies the space between cells. |
rules |
None groups rows cols all |
Deprecated − Used in conjunction with the border attribute, specifies which rules appear between the cells of the table. |
summary |
Text |
Deprecated − Specifies the summary of the content. |
width |
pixels or % |
Deprecated − Specifies the width of the table. |
Example
You can try to run the following code to create a table in HTML −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table>
<!-- Defines a table -->
<tr>
<!-- Defines a row in a tabel -->
<th>Fruits</th>
<!-- Defines a heading in a table -->
<th>Orange</th>
<th>Apple</th>
<th>Mango</th>
</tr>
<tr>
<th>Price</th>
<td>Rs.100</td>
<!-- Defines a data cell in a table-->
<td>Rs.50</td>
<td>Rs.20</td>
</tr>
<tr>
<th>Shipping Weight</th>
<td>1 KG</td>
<td>0.5 KG</td>
<td>0.2 KG</td>
</tr>
</table>
</body>
</html>
Example
Below program demonstrate, creating table with 4 rows and 4 columns −
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h3>Table with 4rows and 4Colums</h3>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
Round Corner Table
Apply CSS properties to table: rounded corner table with the help of border-radius property, we can apply rounded corners to each cell in the table, We can also skip or remove the border around the table by simply leaving out table from the CSS selector.
Example
Following example creates a table with the rounded border −
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-radius: 10px;
}
th,
td {
background-color: pink;
}
</style>
<body>
<h2>HTML table with rounded border</h2>
<table style="width:100%">
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Bob</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>102</td>
<td>Hari</td>
<td>Bombay</td>
</tr>
</table>
</body>
</html>
491 Views
