Scribd
Upload
14 views

Web Development Lecture 4

Uploaded by

noormuneer.malik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Web Development Lecture 4

Uploaded by

noormuneer.malik
Copyright
© © All Rights Reserved
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