Scribd
Upload
22 views

Web Development Lecture 4

Uploaded by

noormuneer.malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

Web Development Lecture 4

Uploaded by

noormuneer.malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Introduction to HTML

LECTURE#4

Lecture Outline:
1. HTML tables
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.

Example:

<table>
<tr> tr = table row
<th>Company</th> th = table heading
<th>Contact</th> td = table data
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Example:

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Example:

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

How To Add a Border


table, th, td {
border: 1px solid black;
}

Round Table Borders


table, th, td {
border: 1px solid black;
border-radius: 10px;
}

Border Color
th, td {
border-color: blue;
}

HTML Table Width


To set the width of a table, add the style attribute to the <table> element:

<table style="width:100%">

HTML Table - Cell Padding


Cell padding is the space between the cell edges and the cell content.

th, td {
padding: 15px;
}

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

You might also like