- HTML tables are used for displaying data that make sense in spreadsheet software.
- The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
- Tables allows the programmer / Developer to arrange data in Rows And Columns.
- They consist of rows and columns and are often used on websites for the effective displaying of tabular data.
- The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.
- By default, the text in <th> elements are bold and centered. By default, the text in <td> elements are regular and left-aligned.
| Students | Contact no | Class |
|---|---|---|
| Aman Palya | 8473212341 | 10th |
| Sajal Gupta | 3342345453 | 12th |
| Priyanka Kaushal | 7656432234 | 11th |
Html Table
- <table> tag is used to define a table.
- <tr> tag is used to define a row in a table.
- <td> tag is used to define a data cell.it can also contains other html elements such as image,list and etc.
- <th> tag is generally used to define a heading of each column.
Code
<Html>
<Head> <Head>
<Body>
<table>
<tr>
<th> Student </th>
<th> Contact </th>
<th> Class </th>
</tr>
<tr>
<td> Aman Palya </td>
<td> 8473212341</td>
<td> 10 <sup>th</sup></td>
</tr >
<tr>
<td> Sajal Gupta </td>
<td> 3342345453</td>
<td> 12<sup>th</sup></td>
</tr
<tr>
<td> Priyanka Kaushal </td>
<td> 7656432234</td>
<td> 11<sup>th</sup></td>
</tr
>
</table>
</body>
</html> Output
Student
Contact
Class
Aman Palya
8473212341
10th
Sajal Gupta
3342345453
12th
Priyanka Kaushal
7656432234
11th
if we are creating a table it necessary to give the table border. If we will not giving a table border it looks something like
We can give the table border in two ways-
- By using Border Attribute.
- And by using CSS property.
To make the border on table we uses Border attribute inside table tag.
Same as border atribute we uses Height and width where the the value of height and width should be numberic.
<table border="1px" Height="200px" Width="100%""></table>| Student | Contact | Class |
|---|---|---|
| Aman Palya | 8473212341 | 10th |
| Sajal Gupta | 3342345453 | 12th |
| Priyanka Kaushal | 7656432234 | 11th |
Html Cellspacing And Cellpadding
- The Cellspacing attribute is used to give space between two cells.
- The Cellpadding attribute is used to adjust the space in the cell & the content present in it,by doing so the size of the cell can be changed.
Code
<Html>
<Head> <Head>
<Body>
<table cellspacing="5" cellpadding="5" border="1">
<tr>
<th> Student </th>
<th> Contact </th>
<th> Class </th>
</tr>
<tr>
<td> Aman Palya </td>
<td> 8473212341</td>
<td> 10 <sup>th</sup></td>
</tr >
<tr>
<td> Sajal Gupta </td>
<td> 3342345453</td>
<td> 12<sup>th</sup></td>
</tr
<tr>
<td> Priyanka Kaushal </td>
<td>
7656432234</td>
<td> 11<sup>th</sup></td>
</tr >
</table>
</body>
</html> Output
Student Contact Class Aman Palya 8473212341 10th Sajal Gupta 3342345453 12th Priyanka Kaushal 7656432234 10th
Table Caption
- In table caption is used to give the heading to the table.
- It is used after <table> tag.
- It is written as <caption> ......</caption>
- Click Here to see example
- Colspan and Rowspan are used two merge two or more columns or rows into 1 cell.
- Colspan is used to merge two columns whereas Rowspan is used two merge two rows.
- The value of colspan and rowspan is rhe no of cells to be merged.
Code
<Html>
<Head> <Head>
<Body>
<table border="1">
<caption> Students Information </caption>
<tr>
<th> Student </th>
<th> Contact </th>
<th> Class </th>
</tr>
<tr>
<td colspan="2"> Aman Palya </td>
<td> 10 <sup>th</sup></td>
</tr >
<tr>
<td rowspan="2"> Sajal Gupta </td>
<td> 3342345453</td>
<td> 12<sup>th</sup></td>
</tr
<tr>
<td> 7656432234</td>
<td> 11<sup>th</sup></td>
</tr >
</table>
</body>
</html> Output
Student Information Student Contact Class Aman Palya 10th Sajal Gupta 3342345453 12th 1656432234 11th