2. 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.
3. Table Structure
<table>
</table>
The table tag is a container for every other tag used to create a table in
HTML. The opening and closing table tags should be placed at the
beginning
and 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
in
header cells is bolded and centered.
<tr>
</tr>
The tr tag stands for table row. The opening and closing tr tags surround the
cells for that row.
<td>
</td>
The td tag stands for table data and holds the actual content for the cell.
There
are opening and closing td tags for each cell in each row.
4. Attributes of a table
1. Align
2. Color
3. Border
4. Width
5. Height
6. padding
7. Pacing
5. 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
6. 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>
7. 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 color
We 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
8. Example Code:
<table border=1 bgcolor="green">
<tr>
<td>
This is first column
</td>
<td bgcolor="yellow">
This is second column
</td>
</tr>
</table>
9. 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?
10. Cellpadding and Cellspacing Attributes
There 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.
12. 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.
14. 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>
<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>
15. 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
17. 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>
19. 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>
20. 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.
25. <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>
26. <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>
27. <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>
28. <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>
29. Inner Tables
a) How to create tables inside table columns?
b) How to control space between table cells?
30. 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.
