Scribd
Upload
7 views

HTML Tables

Uploaded by

Rajeev Ranjan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy