Table Structure introduction

Table Structure

You need to know about four basic table tags, as described next:

A table is a data structure that organizes information into rows and columns. It can be used to both store and display data in a structured format. For example, databases store data in tables so that information can be quickly accessed from specific rows.

Table Structure

<table></table>

The table tag is a container for every other tag used to create a table inHTML. The opening and closing table tags should be placed at the beginningand end of your table.

<th></th>

The th tag stands for table header. An optional tag used instead of the td tag,this tag defines a cell containing header information. By default, the content inheader cells is bolded and centered.

<tr></tr>

The tr tag stands for table row. The opening and closing tr tags surround thecells for that row.

<td></td>

The td tag stands for table data and holds the actual content for the cell. Thereare opening and closing td tags for each cell in each row.

Attributes of a table

1. Align

2. Color

3. Border

4. Width

5. Height

6. padding

7. Pacing

With these tags in mind, you can create both basic and complex table structures accordingto your needs. Say you want to create a basic table structure, such as the following.

Popular Girls’ Names

Popular Boys’ Names

Emily Jacob

Sarah Michael

Your code might look like that shown next:

<table><tr><th>Popular Girls’ Names</th><th>Popular Boys’ Names</th></tr><tr><td>Emily</td><td>Jacob</td></tr><tr><td>Sarah</td><td>Michael</td></tr>

</table>

Opening and closing table tags surround the entire section of code. This tells the browser that everything inside these tags belongs in the table. And there are opening and closing tr tags for each row in the table. These surround td or th tags, which, in turn, contain the actual content to be displayed by the browser.

Table with colorWe can add background color to the table using the attribute "bgcolor".This attribute can be added in "table"/"tr"/"td" tag. The color can be set on the whole to table or to rows and column

Example Code:

<table border=1 bgcolor="green"><tr><td>This is first column</td><td bgcolor="yellow">This is second column</td></tr></table>

CAPTION

<CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered. Okay, it's a pretty dull caption. Use it if you'd like or feel free to forget it right here. I just thought I'd show it to you. Heck, you're here aren't you?

Cellpadding and Cellspacing AttributesThere are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

<html><head><title>HTML Table Cellpadding</title></head><body><table border="1" cellpadding="5" cellspacing=“10">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>7000</td>

</tr>

</table>

</body></html>

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

Colspan and Rowspan Attributes

<html><head><title>HTML Table Colspan/Rowspan</title></head><body><table border="1"><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr><tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr><tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr><tr><td colspan="3">Row 3 Cell 1</td></tr></table></body></html>

Here is an example of using image background attribute. <table border="1" bordercolor="green" background="cats and dogs.jpg">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>


</tr>

<tr><td>Row 2 Cell 2</td>


</tr>

<tr><td colspan="3">Row 3 Cell 1</td>

</tr>

</table>

l

setting an image as a table background

Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area

<table border="1" width="400" height="150">

<tr>

<td>Row 1, Column 1</td>


</tr>

<tr>



</tr>

</table>

l

table with and height

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:<thead> - to create a separate table header.<tbody> - to indicate the main body of the table.<tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

l

The three elements for separating

example

<html>

<head>

<title>HTML Table</title>

</head>

<body>

<table border="1" width="100%">

<thead>

<tr>

<td colspan="4">This is the head of the table</td>

</tr>

</thead>

<tfoot>

Cont…<tr>

<td colspan="4">This is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</tbody>

</table>

</body>

</html>

Adding CSS to tables

You can format your tables using Cascading Style Sheets (CSS). Using CSS, you can specify background colors, border colors, border styles etc.

Example<table border="1" style="background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;">

<tr style="background-color:orange;color:white;">

<th style="padding:3px;">Table header</th><th style="padding:3px;">Table header</th>

</tr>

<tr>

<td style="padding:3px;">Table cell 1</td><td style="padding:3px;">Table cell 2</td>

</tr>

<tr>

<td style="padding:3px;">Table cell 3</td><td style="padding:3px;">Table cell 4</td>

</tr>

</table>

Modifying table background color

<table width="20" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">

<tr>

<td>0</td>

<td>0</td>

</tr>

<tr>

<td>0</td>

<td>0</td>

</tr>

<TABLE border="1"

summary="This table gives some statistics about fruit

flies: average height and weight, and percentage

with red eyes (for both males and females).">

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR><TH rowspan="2"><TH colspan="2">Average

<TH rowspan="2">Red<BR>eyes

<TR><TH>height<TH>weight

<TR><TH>Males<TD>1.9<TD>0.003<TD>40%

<TR><TH>Females<TD>1.7<TD>0.002<TD>43%

</TABLE>

<TABLE border="1" cellpadding="5" cellspacing="2"

summary="History courses offered in the community of

Bath arranged by course name, tutor, summary,

code, and fee">

<TR>

<TH colspan="5" scope="colgroup">Community Courses -- Bath Autumn 2015</TH>

</TR>

<TR>

<TH scope="col" abbr="Name">Course Name</TH>

<TH scope="col" abbr="Tutor">Course Tutor</TH>

<TH scope="col">Summary</TH>

<TH scope="col">Code</TH>

<TH scope="col">Fee</TH>

</TR>

<TR>

<TD scope="row">After the Civil War</TD>

<TD>Dr. John Wroughton</TD>

<TD>

The course will examine the turbulent years in England

after 1646. <EM>6 weekly meetings starting Monday 13th

October.</EM>

</TD>

<TD>H27</TD>

<TD>£32</TD>

</TR>

<TR>

<TD scope="row">An Introduction to Anglo-Saxon England</TD>

<TD>Mark Cottle</TD>

<TD>

One day course introducing the early medieval

period reconstruction the Anglo-Saxons and

their society. <EM>Saturday 18th October.</EM>

</TD>

<TD>H28</TD>

<TD>£18</TD>

</TR>

<TR>

<TD scope="row">The Glory that was Greece</TD>

<TD>Valerie Lorenz</TD>

<TD>

Birthplace of democracy, philosophy, heartland of theater, home of

argument. The Romans may have done it but the Greeks did it

first. <EM>Saturday day school 25th October 1997</EM>

</TD>

<TD>H30</TD>

<TD>£18</TD>

</TR>

</TABLE>

Inner Tables

a) How to create tables inside table columns?b) How to control space between table cells?

Table inside table

Many a times we will be using table inside tables Now we will create two row with three columns. The 2nd row, 2nd column will be split again to a table with two rows, two cols. Also we will be using the attributes cellpadding and cellspacing to handle table space.

<table border=1 width=80% height=30% align=center cellpadding=1 cellspacing=1>

<tr height=30%>

<td>First Row</td>

<td>First Row</td>

<td>First Row</td>

</tr>

<tr height=70%>

<td>Second Row</td>

<td >

<table bgcolor=yellow border=1 width=80% height=80%>

<tr ><td> Inner Table </td>

<td> Inner Table </td>

</tr>

l

INNER TABLE

<tr >

<td> Inner Table </td>

<td> Inner Table </td></tr>

</table>

</td>

<td>Second Row</td>

</tr>

</table>

l

INNER TABLE

Table Structure introduction

Documents

Transcript of Table Structure introduction