Scribd
Upload
16 views

HTML Tables

Uploaded by

Murali Mohan Reddy Chinnamallu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

HTML Tables

Uploaded by

Murali Mohan Reddy Chinnamallu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Tables

 Using HTML tables, we can display the data in the table format.
 Using table element and its attributes, we can create table and show the content in
the form of table.
 The html tags and attributes to display the content in the form of table are shown
below:

We can define table using <table> tag,


All Tables can be divided into 3 sections:
1. table Header ---> represented using <thead> tag.
2. Table Body ---> represented using <tbody> tag.
3. Table Footer ---> represented using <tfoot> tag.
We can create multiple rows inside table header, table body and table footer. But it is
recommended to create only a single row inside table header and table footer. We
can create any number of rows inside table body.
 We can create table header using <thead> tag, table body using <tbody> tag and
table footer using <tfoot> tag.
 We can create rows using <tr> tag. tr stands for table row.
 We use <td> or <th> tags to create columns. td stands for table data and th stands
for table header. Anything between <td> and </td> are the content of the table cell.
 <th> tag is always recommended to create columns for first row only. From second
row onwards, it is recommended to use <td> tag.
 By default, the text specified in between <th> and </th> tags are displayed bold and
centered, but we can change that with CSS.
Note: A table cell can contain all sorts of html elements: text images, lists, links, other
tables, etc.,

Ex:
<table>
<thead>
<tr>
<th> Name </th>
<th> Age </th>
<th> Married? </th>
</tr>
</thead>
<tbody>
<tr>
<td> Murali </td>
<td> 31 </td>
<td> true </td>
</tr>
<tr>
<td> Kalia </td>
<td> 22 </td>
<td> true </td>
</tr>
<tr>
<td> Raju </td>
<td> 20 </td>
<td> true </td>
</tr>
</tbody>
</table>

output:

If we use <table>, <thead>, <tbody>, <tfoot>, <tr>, <th> and <td>


to display the content in table form, the browser will display the content in rows and
column wise without any borders. To provide borders, we have specify some additional
information. To specify additional information, we use attributes.
To add border(outer border) to the table, we have to use “frame” attribute. The
predefined values of frame attribute are: void, above, below, hsides, vsides,
lhs, rhs, box, border.
If we want border(frame)(inner border) for rows and columns, we use “rules”
attribute. The predefined values are: none, groups, rows, cols, all.
By default, the content of the body is aligned to left. We can make it align to right or
center using “align” attribute. We can specify align attribute at the table body
level(<tbody> level) or at the individual row level(<tr> level). If we use align attribute
at the body level, then all the rows inside it will be affected. If we use align attribute at the
row level, then that specific only will be affected.
If we want to align data in vertical position, we use “valign” attribute. In other
words, The ‘valign’ attribute of the table tag is used to specify the vertical alignment of
the content within a table cell. The predefined values are: top, center, bottom.
We can modify height and width of the table using “height” and “width”
attribute. Examples of height attribute values are: 100px, 50%, auto, etc., Examples of
width attribute values are: 100px, 50%, auto, etc.,
frame attribute:

rules attribute:

height and width attributes:

align attribute:
valign attribute:

Ex:
<!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>
<table frame="box" rules="all" height="300" width="300" >
<thead>
<tr>
<th> Brand </th>
<th> Model </th>
<th> Price </th>
</tr>
</thead>
<tbody align="center" valign="center" >
<tr>
<td> Red Mi </td>
<td> Note 13 </td>
<td> 34,999 </td>
</tr>
<tr>
<td> One Plus </td>
<td> 11R </td>
<td> 27,999 </td>
</tr>
<tr>
<td> One Plus </td>
<td> Nord CE4 </td>
<td> 24,999 </td>
</tr>
</tbody>
</table>
</body>
</html>

You might also like