Lecture 6
[Link]
HTML Favicon
A favicon is a small image displayed next to the page title in the browser
tab. A favicon image is displayed to the left of the page title in the browser
tab. To add a favicon to your website, either save your favicon image to the
root directory of your webserver, or create a folder in the root directory
called images, and save your favicon image in this folder. A common name
for a favicon image is "[Link]".
Next, add a <link> element to your "[Link]" file, after the <title>
element, like this: <!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon"
href="/images/[Link]">
</head>
</html>
[Link]
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
A table in HTML consists of table cells inside rows and columns.
<table>
<table> element defines a table. <tr>
<th>Company</th>
Each table cell is defined by a <td> and a
<th>Country</th>
</td> tag. td stands for table data. </tr>
Everything between <td> and </td> are <tr>
the content of the table cell. <td>Tecnsol</td>
<td>Pakistan</td>
Each table row starts with a <tr> and end
</tr>
with a </tr> tag. tr stands for table row. <tr>
You can have as many rows as you like in <td>Microsoft</td>
a table. <td>USA</td>
</tr>
[Link] </table>
HTML Tables
Sometimes you want your cells to be headers, in those cases use the
<th> tag instead of the <td> tag. By default, the text in <th>
elements are bold and centered, but you can change that with CSS.
Column
row th th th tr
td td td tr
[Link]
HTML Tables Borders
HTML tables can have borders of different styles and shapes. When
you add a border to a table, you also add borders around each table
cell. To add a border, use the CSS border property on table, th, and td
elements.
<head>
To avoid having double borders like in
the example above, set the CSS <style>
border-collapse property to collapse. table, th, td {
table, th, td { border: 1px solid black;
border: 1px solid black; }
border-collapse: collapse; </style>
}
</head>
[Link]
HTML Tables Borders
With the border-radius property, the borders get rounded corners:
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
With the border-color property, you can set the color of the border.
th, td {
border-color: #96D4D4;
}
[Link]
HTML Tables Sizes
HTML tables can have different 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. To set the width of a table, add the style
attribute to the <table> element.
<table style="width:100%">
Using a percentage as the size unit for a width means how wide will this
element be compared to its parent element, which in this case is the
<body> element.
To set the size of a specific column, add the style attribute on a <th> or
<td> element
<th style="width:70%">Firstname</th>
[Link]
HTML Tables Sizes
To set the height of a specific row, add the style attribute on a table row
element.
<tr style="height:200px">
<td>Web</td>
<td>Dev</td>
</tr>
[Link]
Table Caption
You can add a caption that serves as a heading for the entire table. To add
caption to a table, use the <caption> tag. The <caption> tag should be
inserted immediately after the <table> tag.
<table>
<caption>Company Names</caption>
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Tecnsol</td>
<td>Pakistan</td>
</tr>
</table>
[Link]