Scribd
Upload
6 views

HTML Tables

Uploaded by

Rajeev Ranjan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML Tables

Uploaded by

Rajeev Ranjan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

 A table looks like a spreadsheet

 Tables are made up of cells, laid out in rows


and columns, similar to a chess board
 A cell can contain data, text or images
 Cells can be combined horizontally or
vertically
 Tables are created with the double-sided table
tag:
<table>….</table>
 Tables require dimensions
 You can use either percentages or pixel dimensions
 <table width="100%" border="1">
 <table width="640" border="1">
 Borders can be displayed or made invisible
 Borders can have various thicknesses
 If you indicate the size based on percentage:
 The table will resize as the window is resized
 If you indicate the size based on pixels:
 The table will not resize as the window is resized,
but there will be more control of the final look at a
specific screen resolution
 <tr>…</tr> creates a table row
 <td>…</td> creates the actual cell, and stands
for table data
 <th>…</th> creates a table header which is
bold and centered.
<table>
<tr>
<th width="183">First Name</th>
<th width="183">Last Name</th>
<th width="252">Email Address</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
 Colspan combines selected cells in a row into
one big row
<tr>
<td colspan="3">&nbsp;</td>
</tr>
 Rowspan combines the selected cells in a row
into one big column

<tr width="183" rowspan="2">First


Name</tr>
 If you create a table with 3 rows and 3 columns,
It looks like a tic-tac-toe board
<table width="314" height="291" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
 Nested tables are when we build tables inside
of tables
 Nesting tables is a common task in HTML and
has many purposes
 To nest a table, you literally take the entire
code used to build a table and place it between
the <td></td> tags which create the cells of the
outer table
<td>
<table width="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>

You might also like