Lec 16 (HTML Table)

HTML Table
HTML Table
▸ HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
▸ We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
▸ In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
▸ HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the page.
2
HTML Table
▸ A table header is defined with the <th> tag. By default, table headings are
bold and centered.
▸ A table data/cell is defined with the <td> tag.
3
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a
table for formatting.
<col> It is used with <colgroup> element to specify
column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
4
Example
<html>
<head><title> Working With Table </title></head>
<body style="background-color:pink;">
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Abdul</td><td>Naveed</td><td>35</td></tr>
<tr><td>Nazeer</td><td>Mari</td><td>50</td></tr>
<tr><td>Aamir</td><td>Chandio</td><td>52</td></tr>
<tr><td>Moaiz</td><td>Khan</td><td>72</td></tr>
</table>
</body>
</html>
5
Adding a Border
▸ There are two ways to specify border for HTML tables.
▹ By border attribute of table in HTML
<table border="1">
▹ By border property in CSS
<style>
table, th, td {
border: 1px solid black;
}
</style>
6
HTML Border attribute
<html>
<table border="1">
</table>
<body>
</html>
7
CSS Border property
<html>
<style>
table, th, td {
}
</style>
<table>
</table>
<body></html>
8
Collapse Borders
 You can collapse all the borders in one border by border-collapse property. It will collapse
the border into one.
<style>
table, th, td {
border-collapse:collapse;
}
</style>
9
Table with cell padding
▸ Cell padding specifies the space between the cell content and its borders.
▸ If you do not specify a padding, the table cells will be displayed without
padding.
▸ You can specify padding for table header and table data by two ways:
 By cellpadding attribute of table in HTML
 By padding property in CSS
▸ The cellpadding attribute of HTML table tag is obselete now. It is
recommended to use CSS.
10
Cell padding Example
<html>
<style>
table, th, td {
border: 1px solid pink;
 }
th, td {
padding: 10px; }
</style>
<table>
</table>
</style>
<body></html>
11
Table width
▸ The width attribute specifies the width of a table or the width of a table cell.
The width can be set either as an absolute value in pixels, or as in percentage
(%).
 Table width in pixels
• <table border=1 width=100>
 Table width in percentage (%)
• <table border=1 width=100%>
▸ The width value 100% indicates a width for the table that is the full width of
the browser window.
12
Table width
<html>
<table border=1 width="500">
</table>
<body></html>
13
Cell Width or Column width
▸ You can set the width of a table cell using width attribute.
▹ <td width=30%>
<html>
<body >
<table border=1 width=400>
<tr>
<td width=30%>
Cell width is 30%
</td>
<td width=70%>
Cell width is 70%
</td>
</tr>
</table>
</body></html> 14
Table Height
▸ Height attributes can be added to the < table > tag as well as the < td > tag.
▸ Table Height
• <table height=400>
▸ Cell Height
• <td height=100>
15
Table with colspan
▸ If you want to make a cell span more than one column, you can use the
colspan attribute.
▸ It will divide one cell/row into multiple columns, and the number of columns
depend on the value of colspan attribute.
▸ Syntax:
▹ <th colspan="2">.</th>
16
Colspan Example
<html><head><title> Working With Table </title></head>
<body style="background-color:green;">


<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 5px;
} </style>
<table>
<tr><th>Name</th> <th colspan="2">Mobile No.</th> </tr>
<tr><td>Naveed</td><td>7503520801</td> <td>9555879135</td> </tr>
</table><body></html>
17
Table with rowspan
▸ If you want to make a cell span more than one row, you can use the rowspan
attribute.
▸ It will divide a cell into multiple rows. The number of divided rows will
depend on rowspan values.
▸ Syntax:
▹ <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr
>
18
Rowspan Example


<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
<table>
<tr><th>Name</th><td>Naveed</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7520801</td></tr>
<tr><td>5879135</td></tr>
</table>
19
Table with caption
▸ HTML caption is diplayed above the table. It must be used after table tag
only.
▸ Syntax:
▹ <caption>Student Records</caption>
20
Table with caption Example
<table border="1">
<caption>Student Records</caption>
<tr><td>Vicky</td><td>....</td><td>70</td></tr>
<tr><td>pinky</td><td>....</td><td>60</td></tr>
<tr><td>Shane</td><td>...</td><td>42</td></tr>
<tr><td>Jack</td><td>....</td><td>62</td></tr>
</table>
21
Adding Border Spacing
▸ Border spacing specifies the space between the cells.
▸ To set the border spacing for a table, use the CSS border spacing property.
▸ Note: If the table has collapsed borders, border-spacing has no effect.
22
Example


<style>
table, th, td {
border-collapse: separate;
border-spacing: 15px;
}
th, td {
padding: 10px;
}
</style>
23
HTML <table> align Attribute
▸ You can specify the position of table by
• Left
• Right
• Center
▸ Syntax
▹ <table align="center">
24
HTML <table> align Attribute
• Left
• Right
• Center
▸ Syntax
25
HTML <table data> align
• Left
• Right
• Center
▸ Syntax
26
THANKS!
Any questions?
27

Lec 16 (HTML Table)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec 16 (HTML Table)

Uploaded by

Copyright:

Available Formats

HTML Table

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

<table border=1 width="500">

▸ Note: If the table has collapsed borders, border-spacing has no effect.

You might also like