Embed Size (px)
Citation preview
Lesson 7
Tables
Table Tags and Attributes
Tables
HTML tables are used in two main ways:
1. To organize tabular data in a familiar spreadsheet-like way.
2. To allow for more attractive layout of web page content, giving the designer more control over what goes where.The borders of the tables do not usually show in this case, and it is not obvious that the page content is in table cells.
Using tables to display data
• Borders may or may not be used, but the data retains a table-like appearance, which makes it easy to read.
Table Tags
There are five main tags used with tables. These tags are supported by both IE and Netscape. They are;
1. <table></table>
2. <caption></caption>
3. <tr></tr> (table row)
4. <td></td> (table data)
5. <th></th> (table header)
Table Tags
Most often, you will only need to use three tags;
1. <table></table>
2. <tr></tr> (table row)
3. <td></td> (table data)
Table Terminology
Example 1
1 <html>2 <head>3 <title>Example 1</title>4 </head>5 <body>6 <h3>Table example 1</h3>7 <!-- start of table --> 8 <table>9 <tr>10 <td>cell 1</td>11 <td>cell 2</td>12 </tr>13 <tr>14 <td>cell 3</td>15 <td>cell 4</td>16 </tr>17 <tr>18 <td>cell 5</td>19 <td>cell 6</td>20 </tr>21 </table>22 <!-- end of table -->23 </body>24 </html>
Example 1 (continued)
• Note how the data is arranged in a table of three rows and two columns, but it does not look like a typical table, because there are no borders.
Example 2
1 <html>2 <head>3 <title>Example 2</title>4 </head>5 <body>6 <h3>Table example 2</h3>7 <!-- start of table --> 8 <table border="1">9 <tr>10 <td>cell 1</td>11 <td>cell 2</td>12 </tr>13 <tr>14 <td>cell 3</td>15 <td>cell 4</td>16 </tr>17 <tr>18 <td>cell 5</td>19 <td>cell 6</td>20 </tr>21 </table>22 <!-- end of table -->23 </body>24 </html>
Example 2 (continued)
• The previous slide looks more like a table or spreadsheet, because of the border
• The border is added by specifying an integer greater than zero, which will give the width of the border in pixels
Example 2 (continued)
• A default value of 2 is used for cellspacing, and a default of one is used for cellpadding
• Various combinations of border thickness, cellspacing, and cellpadding can be observed by using the JavaScript program available at http://javascript.internet.com/miscellaneous/table-maker.html
Example 3
1 <h3>Table example 3</h3>2 <!-- start of table --> 3 <table border="5" cellspacing="5" cellpadding="5">4 <caption>This is an example</caption>5 <tr>6 <th> </th>7 <th>column 1</th>8 <th>column 2</th>9 </tr>10 <tr>11 <th>row 1</th>12 <td>cell 1</td>13 <td>cell 2</td>14 </tr>15 <tr>16 <th>row 2</th>17 <td>cell 3</td>18 <td>cell 4</td>19 </tr>20 <tr>21 <th>row 3</th>22 <td>cell 5</td>23 <td>cell 6</td>24 </tr>25 </table>26 <!-- end of table -->
Example 3 (continued)
• The previous example shows all of the table tags used
• The head and body tags were omitted to save space on the slide
• Note how the caption appears above the table by default
• Note how the text in the table header cells is automatically bolder
<caption>
• The caption tag has an attribute called align.• You can use it to put the caption above or below
the table, e.g.
<caption align=“top”> (default)
<caption align=“bottom”>
<table cols= >
• The table tag has an attribute called cols, which allows you to specify how many columns the table will have
• Using this attribute will help speed the display of your table, because the browser does not need to read the entire piece of source code, counting the <tr> tags, before it knows how to start drawing the table.
Empty cells
• The next table has 5 columns, and 10 rows.• Cellpadding and cellspacing are set to 0, and the
border is set to 1.• The table does not look right because there are no
non-breaking spaces ( ) in the empty cells, to preserve the table integrity.
Empty cells (continued)1 <table width="72%" border="1" cellspacing="0"
cellpadding="0">
2 <caption>Table with empty cells - no non-breaking spaces</caption>
3 <tr>
4 <td></td>
5 <td>fgdhd</td>
6 <td>fdsf</td>
7 <td></td>
8 <td>fdsfds</td>
9 </tr>
10 <tr>
11 <td>fds</td>
12 <td></td>
13 <td></td>
14 <td>hfgd</td>
15 <td></td>
16 </tr>
17 <tr>
18 <td></td>
19 <td>fdfd</td>
20 <td>fdgg</td>
21 <td></td>
22 <td>fgd</td>
23 </tr>
24 </table>
Empty cells (continued)
• The next table is the same as the previous one, but with non-breaking spaces ( ) acting as placeholders for the cells, preserving the internal borders.
Empty cells (continued)1 <table width="72%" border="1" cellspacing="0"
cellpadding="0">
2 <caption>Table with empty cells - no non-breaking spaces</caption>
3 <tr>
4 <td> </td>
5 <td>fgdhd</td>
6 <td>fdsf</td>
7 <td> </td>
8 <td>fdsfds</td>
9 </tr>
10 <tr>
11 <td>fds</td>
12 <td> </td>
13 <td> </td>
14 <td>hfgd</td>
15 <td> </td>
16 </tr>
17 <tr>
18 <td> </td>
19 <td>fdfd</td>
20 <td>fdgg</td>
21 <td> </td>
22 <td>fgd</td>
23 </tr>
24 </table>
Table tags
A table is defined by the tags <table> </table>
<table border = "1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr></table>
Inside a table row you can put table headers, table rows, and table cells.
And can have the following attributes: • border="n" n=number of pixels (Size of border around the cells)• Summary text (Summary of this table for speech-synthesizing/non-visual
browsers)• cellpadding="n"• cellspacing="n"
Tables
The TD tag sets are individual sections that are contained within a TR tag set which are contained within a TABLE tag set.
The <tr> and </tr> tags define a row of a table.
The <th> and </th> tags define the table header cells.
The <td> and </td> tags define the table data cells.
Tables
align="alignment" alignment =left, right, or center
valign="alignment" alignment =top, middle, or bottom
col span="n" n=the number of columns to span
rowspan="n" n=the number of rows to span
nowrap=nowrap
width="n" n=the number of pixels or percentage (n%)
height="n" n=the number of pixels or percentage (n%)
hspace="n" n=the number of pixels
vspace="n" n=the number of pixels
Border and a Caption
A border attribute can be defined as follows:
<table border="border">
You can change the border attribute setting in order to modify the width of the border surrounding a table
An optional caption can be defined for a table by using the caption tag.
<caption>Sample Table</caption>
Use the caption tag to place explanatory text about a table near the table.
(note :IE NN)
Background colours
• To display background colors in table cells use the bgcolor attribute.
• The attribute bgcolor applies to the <table>, <tr>, <td>, and <th> tags.
• Background colours can be set within the table as a whole, for an individual row, and for an individual cell.
• Background colours should be used to make the table and its information more readable and useable.
Background colours• Setting the background colour of an individual cell
will override the background colour that has been set for that row or for the entire table.
• Setting the background colour for a row will override the background colour set for the entire table.
• Setting the background colour for an entire table will override the background colour set for a page.
• Note that the bgcolor attribute uses the American spelling of the word.
• Example
Alignment, Height & Width
You can align data within a cell horizontally and vertically:
<td align="left" valign="top"><img src=“ " alt="server on left" height="36" width="36" /></td>
Width and Height:
To change the display size of a table:
Cellspacing and Cellpadding
To change the width of column and row border use the cellspacing attribute. This defines the space between cells.
<table border cellspacing="10">
To change the amount of space between the edges of the cells and the cell’s contents use the cellpadding attribute
<table border cellpadding="10">
Spanning Rows and Columns
To span multiple rows and columns:
<th colspan=2>xxx</th>
<th rowspan=2>xxx</th>
<td colspan= > <td rowspan= >
• The colspan and rowspan attributes work the same way for <th> as they do for <td>.
• When adding colspan or rowspan, you must remove the individual cells that will be occupied by the expanded cell, as shown in the following examples.
Original table1 <table width="100%" height="100%" border="1"
cellspacing="0" cellpadding="0">2 <tr>3 <td> </td>4 <td> </td>5 <td> </td>6 <td> </td>7 </tr>8 <tr>9 <td> </td>10 <td> </td>11 <td> </td>12 <td> </td>13 </tr>14 <tr>15 <td> </td>16 <td> </td>17 <td> </td>18 <td> </td>19 </tr>20 <tr>21 <td> </td>22 <td> </td>23 <td> </td>24 <td> </td>25 </tr>26 </table>
<td colspan= > (wrong)1 <table width="100%" height="100%" border="1"
cellspacing="0" cellpadding="0">2 <tr>3 <td colspan="3"> </td>4 <td> </td>5 <td> </td>6 <td> </td>7 </tr>8 <tr>9 <td> </td>10 <td> </td>11 <td> </td>12 <td> </td>13 </tr>14 <tr>15 <td> </td>16 <td> </td>17 <td> </td>18 <td> </td>19 </tr>20 <tr>21 <td> </td>22 <td> </td>23 <td> </td>24 <td> </td>25 </tr>26 </table>
<td colspan= > (corrected)1 <table width="100%" height="100%" border="1"
cellspacing="0" cellpadding="0">2 <tr>3 <td colspan="3"> </td>4 <td> </td>5 6 7 </tr>8 <tr>9 <td> </td>10 <td> </td>11 <td> </td>12 <td> </td>13 </tr>14 <tr>15 <td> </td>16 <td> </td>17 <td> </td>18 <td> </td>19 </tr>20 <tr>21 <td> </td>22 <td> </td>23 <td> </td>24 <td> </td>25 </tr>26 </table>
<td rowspan= > (wrong)1 <table width="100%" height="100%" border="1"
cellspacing="0" cellpadding="0">
2 <tr>
3 <td colspan="3"> </td>
4 <td> </td>
5 </tr>
6 <tr>
7 <td rowspan="3"> </td>
8 <td> </td>
9 <td> </td>
10 <td> </td>
11 </tr>
12 <tr>
13 <td> </td>
14 <td> </td>
15 <td> </td>
16 <td> </td>
17 </tr>
18 <tr>
19 <td> </td>
20 <td> </td>
21 <td> </td>
22 <td> </td>
23 </tr>
24 </table>
<td rowspan= > (corrected)1 <table width="100%" height="100%" border="1"
cellspacing="0" cellpadding="0">
2 <tr>
3 <td colspan="3"> </td>
4 <td> </td>
5 </tr>
6 <tr>
7 <td rowspan="3"> </td>
8 <td> </td>
9 <td> </td>
10 <td> </td>
11 </tr>
12 <tr>
13
14 <td> </td>
15 <td> </td>
16 <td> </td>
17 </tr>
18 <tr>
19
20 <td> </td>
21 <td> </td>
22 <td> </td>
23 </tr>
24 </table>
thead, tbody, tfoot
To specify the head section of a table use the <thead></thead>. The <tbody></tbody> tags are used to specify the body section of the table and are similar to the <body> element of an HTML document. The <tfoot></tfoot> tags are used to specify the footer section of the table.
If you use the thead, tfoot and tbody elements, you must use every element, but you can leave them blank They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.
The <thead>,<tbody> and <tfoot> elements are
seldom used, because of bad browser support. This should change in future.
The COL Tag
The <col> tag is used to specify the alignment for an entire column. Use this element when you want to specify different attribute values to a column inside a colgroup.
This example shows a colgroup that has three columns of different widths:<table border="1"> <colgroup span="3"> <col width="20"></col> <col width="50"></col> <col width="80"></col> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr></table>
Note the different width defined for each column.
COLGROUP
<COLGROUP> .. </COLGROUP>
This tag is used to group together columns in a table. It allows you to treat the columns in your table similarly to the rows, including rule lines to differentiate the columns. It goes at the beginning of the table, before the content.
Using tables for page layout
• Practically every professional site today uses tables to present an attractive layout
• It is a way to break a page up into sections, and control the content within each section.
• Tables allow content to take a familiar form, similar to magazine or newspaper layout
Using tables for page layout
• Tables can be nested multiple times, so that the cell of a table contains a second table, and a cell of the second table contains a third table, although good planning should minimize nesting to keep the code simple.
• The following example will build a page using several tables, and tables within the cells of other tables
Using tables for page layout
Pay particular attention to how the following features of tables apply when they are used for layout;
• Table width, height• Background color• Table row alignment• Table data width, and alignment• Each new table added will be shown in bold type
in the source code
Layout design
• When using tables for layout, the first thing you should do is plan your layout using a pencil and paper.
• Decide on the placement and proportions needed before you start writing code.
Layout design
• Try to avoid nesting tables more than two levels deep, since they will be easier to work with.
• With a more complicated design involving nested tables, it can be helpful to create each table separately to get the layout right, and then put the tables together.
mmmmm
mmmmm
mmmmm
Review
<THEAD> .. </THEAD>
This tag defines the enclosed rows as the header rows of the table. If the table is broken across several physical pages (such as when printing), the header rows will be repeated.
<TFOOT> .. </TFOOT>
This tag defines the enclosed rows as the footer rows of the table. If the table is broken across several physical pages (such as when printing), the footer rows will be repeated.
<TBODY> .. </TBODY>
This tag divides your table into discrete sections. Each section is delimited with a rule line.
![End-User Probabilistic Programming (DRAFT)€¦ · probabilistic programming systems aimed towards spreadsheet users. Examples include Tabular [11] and Invrea’s Scenarios [39]](https://img.pdfslide.net/doc/110x75/5f75c35b4a8c35070a3c1308/end-user-probabilistic-programming-draft-probabilistic-programming-systems-aimed.jpg)
![[220] Tabular Data · Learning Objectives Today CSV format •purpose •syntax •comparison to spreadsheet Reading CSV files •without header •with header •type casting Chapter](https://img.pdfslide.net/doc/110x75/5ecc2bebed42627a2851ed73/220-tabular-data-learning-objectives-today-csv-format-apurpose-asyntax-acomparison.jpg)
