UNIT 4
WORKING WITH
TABLES
WHAT IS A TABLE IN HTML?
A table is a representation of data arranged in rows and
columns. Really, it's more like a spreadsheet. In HTML, with
the help of tables, you can arrange data like images, text,
links and so on into rows and columns of cells .
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag.
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.
EXAMPLE
<!DOCTYPE html>
<html> <tr>
<body> <td>Rohit</td>
<table style="width:100 %"> <td>Kumar</td>
<tr> <td>30</td>
<th>Firstname</th> </tr>
<th>Lastname</th> </table>
<th>Age</th>
</tr> </body>
</html>
<tr>
<td>Rahul</td>
<td>Sharma</td>
<td>20</td>
</tr>
<tr>
<td>Sahil</td>
<td>Verma</td>
<td>22</td>
</tr>
HTML TABLE - ADDING A BORDER
If you do not specify a border for the table, it will be displayed
without borders.
A border is set using the CSS border property:
Example
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
HTML TABLE - COLLAPSED BORDERS
If you want the borders to collapse into one border, add the CSS
border-collapse property:
Example
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
HTML TABLE – ST YLE TABLE BORDERS
If you set a background color of each cell, and give the border a
white color (the same as the document background), you get
the impression of an invisible border :
Example:
table,th,td{
border:1px solid white;
border-collapse:collapse;
}
th, td{
background-color:#96D4D4;
}
HTML TABLE – ROUND TABLE BORDERS
With the border-radius property, the borders get rounded
corners:
Example:
table,th,td{
border:1px solid white;
border-radius:10px;
}
HTML TABLE – DOTTED TABLE BORDERS
With the border-style property, you can set the appearance of
the border.
Example:
th,td{
border-style: dotted;
}
HTML TABLE SIZES
HTML tables can have dif ferent sizes for each column, row or
the entire table.
Use the style attribute with the width or height properties to
specify the size of a table, row or column .
HTML TABLE WIDTH
To set the width of a table, add the style attribute to
the <table> element:
EXAMPLE
<!DOCTYPE html>
<html> <tr>
<body> <td>Rohit</td>
<table style="width:100 %"> <td>Kumar</td>
<tr> <td>30</td>
<th>Firstname</th> </tr>
<th>Lastname</th> </table>
<th>Age</th>
</tr> </body>
</html>
<tr>
<td>Rahul</td>
<td>Sharma</td>
<td>20</td>
</tr>
<tr>
<td>Sahil</td>
<td>Verma</td>
<td>22</td>
</tr>
HTML TABLE COLUMN WIDTH
To set the size of a specific column, add the style attribute on
a <th> or <td> element:
EXAMPLE
<!DOCTYPE html>
<tr>
<html>
<td>Eve</td>
<style> <td>Jackson</td>
table, th, td { <td>94</td>
border:1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>John</td>
<td>Doe</td>
</style> <td>80</td>
<body> </tr>
</table>
<h2>Set the first column to 70% of the table
width</h2>
</body>
<table style="width:100%"> </html>
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML TABLE ROW HEIGHT
To set the height of a specific row, add the style attribute on a
table row element:
EXAMPLE
<!DOCT YPE html>
<html>
<style>
table, th, td { <tr>
border:1px solid black; <td>Eve</td>
border-collapse: collapse; <td>Jackson</td>
} <td>94</td>
</style> </tr>
<body> <tr>
<td>John</td>
< h 2 > S e t t h e h e i g h t o f t h e s e c o n d r ow <td>Doe</td>
to 2 0 0 p i x e l s < / h 2 >
<td>80</td>
<table style="width:100%">
</tr>
<tr> </table>
<th>Firstname</th>
<th>Lastname</th> </body>
<th>Age</th> </html>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML TABLE - ADDING 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.
To set the padding, use the CSS padding property:
Example:
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
To add padding only above the content, use the padding-
top property.
And the others sides with the padding-bottom, padding-left,
and padding-right properties:
Example:
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
HTML TABLE - CELL SPACING
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-
spacing property on the table element:
Example:
table{
border-spacing: 30px;
}
HTML TABLE - LEFT-ALIGN HEADINGS
By default, table headings are bold and centered.
To left -align the table headings, use the CSS text-align property:
Example:
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text -align: left;
}
</style>
</head>
HTML TABLE - 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:
Example:
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
HTML TABLE - CELLS THAT SPAN MANY
COLUMNS
To make a cell span more than one column, use the colspan
attribute:
EXAMPLE
< ! D O C T Y P E ht m l >
< ht m l >
<head>
<style>
ta b l e , t h , td {
b o rd e r : 1 px s o l i d b l a c k ;
b o rd e r - co l l a ps e: co l l a ps e ;
}
t h , td {
p a d d i n g : 5 px ;
t ex t - a l i g n : l ef t ;
}
< /s t y l e >
</head>
<body>
< h 2 > C e l l t h a t s p a n s t w o co l u m n s : < /h 2 >
< ta b l e s t y l e = " w i d t h : 1 00 % " >
<tr>
<th>Name</th>
< t h co l s p a n =" 2 " > D eta i l s < / t h >
</tr>
<tr>
< td > R a h u l < / td >
< td > K 1 5 0 8 < / td >
< td > 1 8 < / td >
</tr>
</table>
</body>
< / ht m l >
HTML TABLE - CELLS THAT SPAN MANY
ROWS
To make a cell span more than one row, use the rowspan attribute:
EXAMPLE
<body>
<!DOCTYPE html> <h2>Cell that spans two rows:</h2>
<html> <table style="width:100%">
<head> <tr>
<style> <th>Name:</th>
table, th, td { <td>Rahul</td>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
<th rowspan="2">Details</th>
}
<td>K1508</td>
th, td { </tr>
padding: 5px; <tr>
text-align: left; <td>18</td>
} </tr>
</style> </table>
</head>
</body>
</html>
HTML TABLE - ADDING A CAPTION
To add a caption to a table, use the <caption> tag:
EXAMPLE
<!DOCTYPE html> <body>
<html> <table style="width:100%">
<caption>Monthly savings</caption>
<head>
<tr>
<style> <th>Month</th>
table, th, td { <th>Savings</th>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>January</td>
th, td { <td>$100</td>
padding: 5px; </tr>
text-align: left; <tr>
<td>February</td>
}
<td>$50</td>
</style> </tr>
</head> </table>
</body>
</html>
HOVERABLE TABLE
Use the :hover selector on tr to highlight table rows on mouse
over:
Example:
tr:hover
{background-color: #D6ABAB;}
