Scribd
Upload
7 views22 pages

Day 2 - HTML Tables

Uploaded by

seth8longo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views22 pages

Day 2 - HTML Tables

Uploaded by

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

Tables

WHAT'S A TABLE?
BASIC TABLE STRUCTURE
<html>
<body>
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>90</td>
</tr>
</table>
</body>
</html>
RESULT
SPANNING COLUMNS

<html>
<body>
<table>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
</table>
</body>
</html>
RESULT
SPANNING ROWS

<html>
<body>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</body>
</html>
RESULT
LONG TABLES
<html>
<body>
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>

<tbody>...</tbody>

<tfoot>...</tfoot>
</table>
</body>
</html>
RESULT
OLD CODE: WIDTH & SPACING
<html>
<body>

<table width="400“ cellpadding="10“ cellspacing="10">


<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th>Balance</th>
</tr>

<tr> ... </tr>


</table>

</body>
</html>
RESULT
OLD CODE: BORDER &
BACKGROUND
<html>
<body>

<table border="2"
bgcolor="#efefef">
<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th bgcolor="#cccccc">Balance</th>
</tr>

<tr> ... </tr>

</table>
</body>
</html>
OLD CODE: BORDER &
BACKGROUND
<html>
<body>

<table border="2" bgcolor="#efefef">


<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th bgcolor="#cccccc">Balance</th>
</tr>
<tr> ... </tr>
<tr> ... </tr>
</table>

</body>
</html>
RESULT
RESULT

• Cell Padding
• Area between the data in each cell and the edge
of the cell

• Cell Spacing
• The space between each cell
SUMMARY

The <table> element is


used to add tables to
a
web page.
SUMMARY

A table is drawn out


row by row. Each row
is created with the <tr>
element.
SUMMARY

Inside each row are


cells represented by
the <td> element (or
<th> if it is
a header).
SUMMARY

You can make cells of


a table span more than
one row or column
using the rowspan and
colspan attributes.
SUMMARY
For long tables you
can split the table into
a <thead>, <tbody>, and
<tfoot>.

We also learnt about


cell padding and cell
spacing

You might also like