TABLES IN HTML WITH ATTRIBUTES
A table is made up of rows and columns. A table in a
webpage is created by using <table> tag, which is a container tag. The
tags and attributes used to create a table are as follows : <tr> ,
<th>, <td> . The HTML tables also allow web developers to arrange
data like text, images, links, other tables, etc.
Example:
<tr>
: tr tag is used to create each
row of the table.
<th> : It indicates table heading. <th> is
generally used for first row column content of the table. It displays content
in the middle of table and in bold format. It can be replaced with <td>.
<td> : It
specifies data within the table (cell content).
Example 1 A
Simple html table using tr , th td :
|
<!DOCTYPE html> <html> <head> <title>TABLE1</title> </head> <body>
<table style="width: 50%;"> <tr> <th>NAMES</th> <th>PLACE</th> <th>LOCATION</th> </tr>
<tr> <td>RUPESH</td> <td>PUNE</td> <td>467949745</td> </tr>
<tr> <td>SAKET</td> <td>PUNJAB</td> <td>789645854</td> </tr>
</table>
</body> </html> |
Output:
NOTE: In Example 1 the output does not seems like a table because we have not use border for our example 1 use border attribute and the output will seems like a table check out Example No 2 . also in Example No 1 We have use width:50% try Changing the values and see the results.
Example 2 Adding border In Table :
|
<!DOCTYPE html> <html> <head> <title>TABLE1</title> </head> <body>
<table border=”3” style="width: 50%;"> <tr> <th>NAMES</th> <th>PLACE</th> <th>LOCATION</th> </tr>
<tr> <td>RUPESH</td> <td>PUNE</td> <td>467949745</td> </tr>
<tr> <td>SAKET</td> <td>PUNJAB</td> <td>789645854</td> </tr>
</table>
</body> </html> |
Output:
NOTE: In Example 2 The output seems like a table
because we have added a table border <table border =”2”> try changing the
values of border put 7 and see the changes .
Example 3 COLLAPSING BORDER :
|
<!DOCTYPE html> <html> <head> <title>TABLE1</title>
<style> table, th, td{ border: 2px solid black; width: 50%; border-collapse: collapse; }
</style> </head> <body>
<table>
<caption><h2>Border collapse</h2></caption> <p>We Have Collapsed Border
using Css Propery using
border-collapse: collapse; property</p>
<tr> <th>NAMES</th> <th>PLACE</th> <th>LOCATION</th> </tr> <tr> <td>RUPESH</td> <td>PUNE</td> <td>467949745</td> </tr> <tr> <td>SAKET</td> <td>PUNJAB</td> <td>789645854</td> </tr>
</table>
</body> </html> |
Output:
NOTE:
In Example 3 the table borders are collapsed using css property border-collapse:
collapse; and we have use <caption>
: It is used to specify a table heading.
It has align attribute which can have 'top' or 'bottom' as it’s values. Top is
the default value.
Example 4 HTML TABLE SPAN ROWS :
|
<!DOCTYPE html> <html lang="en"> <head>
<title>TABLE1</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 50%; } </style> </head> <body>
<h2>Cell that spans two
rows</h2> <p>To make a cell span more
than one row, use the rowspan attribute.</p>
<table>
<tr>
<th>Name:</th>
<td>Rupesh jha</td>
</tr>
<tr>
<th rowspan="2">Number:</th>
<td>66758775868</td>
</tr>
<tr>
<td>4555577855</td>
</tr> </table>
</body> </html>
</body> </html> |
Output:
NOTE: In Example 4 we are using rowspan attribute: This attribute is used within
<td> or <th>. It creates a single row spanning across the table. It
takes a numbered value, based on the number of rows to be spanned in a table.
Example 5 HTML TABLE SPAN COLUMNS:
|
<!DOCTYPE
html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; width: 70%; } </style> </head> <body>
<h2>Cell
that spans two columns</h2> <p>To make
a cell span more than one column, use the colspan attribute.</p>
<table> <tr> <th>Name</th> <th
colspan="2">Number</th> </tr> <tr> <td>Rupesh</td> <td>855779764</td> <td>655778875</td> </tr> </table>
</body> </html> |
Output:
NOTE: In Example 5 we are using Colspan attribute: This attribute is
used within <td> or <th>. It creates a single column spanning
across the table. It takes a numbered value, based on the number of columns to
be spanned in a table
Example 6 HTML TABLE PADDING:
|
<!DOCTYPE
html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; width: 70%; th,td{ padding: 25px; } </style> </head> <body> <h2>Cell
that spans two columns</h2> <p>To make
a cell span more than one column, use the colspan attribute.</p> <table> <tr> <th>Name</th> <th
colspan="2">Number</th> </tr> <tr> <td>Rupesh</td> <td>855779764</td> <td>655778875</td> </tr> </table> </body> </html> |
Output:
NOTE: In Example 6 we are using padding attribute
it provides padding (space) around the
table data tr, td. the CSS padding properties
are used to generate space around an element's content
HOW TO MAKE TABLES IN HTML EXAPLAINED IN DETAIL :
ACROYNM TAG IN HTML PLEASE VISIT THIS LINK:
TO LEARN MORE ABOUT HTML TAGS PLEASE VISIT THIS LINK:
Searches related to tables in html
Posts
0 Comments
Please do not enter any spam links in the comment box