html tables and forms creating web pages with html cis 133 web programming concepts 1
TRANSCRIPT
3
Tables on the World Wide Web• A table allows you to organize information on a web page using HTML
tags• Useful when you want to arrange information into rows and columns• Useful for newspaper style websites or for lists• Can be complex with
• Images• Borders• Background colors• Information spanning rows or columns
4
Defining a Table Structure
The first step to creating a table is to plan and specify the table structure: the number of rows and columns the location of column headings the placement of a table caption
Once the table structure is in place, you can start entering data into the table
5
Using the <table>, <tr>, and <td> Tags• Tables consist of rows, columns and cells• A row is a horizontal line of information• A column is a vertical line of information• A cell is the intersection of a row and a column• The tags involved are
<table> tag that identifies the start and ending of the table
<tr> (for table row) <td> (for table data)
tag indicates the presence of individual table cells
6
HTML Structure of a Table
Beginning of the table structure
First row of six in the table
End of the table structure
Table cells
You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so.
After the table structure is in place, you’re ready to add the text for each cell.
7
Creating Headings with the <th> Tag HTML provides the <th> tag for table headings Text formatted with the <th> tag is centered within the
cell and displayed in a boldface font The <th> tag is most often used for column headings,
but you can use it for any cell that you want to contain centered boldfaced text
8
Adding Table Headings to the Table
Text in cells formatted with the <th> tag is bold and centered above each table column
Row of table headings
9
Result of Table Headingsas Displayed in the Browser
Table headings appear bold and
centered over their columns
10
Creating a Table Caption
HTML allows you to specify a caption for a table The syntax for creating a caption is: <caption align=“alignment”>caption text</caption>
alignment indicates the caption placement a value of “bottom” centers the caption below the table a value of “top” or “center” centers the caption above the
table a value of “left” or “right” place the caption above the table
to the left or right
11
Inserting a Table Caption
Caption will be centered above the table
Caption text
Placing the caption text within a pair of <b> tags causes the caption to display as bold
13
Modifying the Appearance of a Table You can modify the appearance of a table by adding:
gridlines borders background color
HTML also provides tags and attributes to control the placement and size of a table
14
Working with the Table Border By default, browsers display tables without table borders A table border can be added using the border attribute to
the <table> tag The syntax for creating a table border is: <table border=“value”> … </table> value is the width of the border in pixels
The size attribute is optional; if you don’t specify a size, the browser creates a table border 1 pixel wide
Can also use CSS
15
Tables with Different Borders Values
The effect on a table’s border when the border size is varied
16
Adding a 5-Pixel Border to a Table
Only the outside border is affected by the border attribute; the internal gridlines are not affected
17
Spanning Rows and Columns To merge several cells into one, you need to create a spanning
cell A spanning cell is a cell that occupies more than one row or
column in a table Spanning cells are created by inserting the rowspan and
colspan attribute in a <td> or <th> tag. The syntax for these attributes is: <td rowspan=“value” colspan=“value”> … </td> value is the number of rows or columns that the cell spans in the
table
18
Spanning Rows and Columns When a cell spans several rows or columns, it is important
to adjust the number of cell tags used in the table row When a cell spans several rows, the rows below the
spanning cell must also be adjusted
19
Example of Spanning Cells
This cell spans two
columns and two rows
This cell spans three columns
This cell spans three
rows
20
A Table Structure with a Row-Spanning Cell
HTML code
Resulting table
Four table cells in the
first row
Only three table cells are
required for the second and third rows
21
Adding Spanning Cells to a Table
This cell spans two columns
These cells span three
rows
Sp
ann
ing
cell
s
22
Aligning a Table and its Contents By default, cell text is placed in the middle of a cell,
aligned with the cell’s left edge You can specify a different horizontal alignment for a <td> or <th> element with:
align=“position” Or CSS
23
Aligning a Table on the Web Page To align a table with the surrounding text, use the align attribute as
follows: align=“alignment” alignment equals “left”, “right”, or “center” left or right alignment places the table on the margin of the Web page
and wraps surrounding text to the side center alignment places the table in the horizontal center of the page,
but does not allow text to wrap around it
24
Aligning the Contents of a Table By default, cell text is placed in the middle of the cell,
aligned with the cell’s left edge By using the align and valign attributes, you can specify
the text’s horizontal and vertical placement To align the text for a single column, you must apply the
align attribute to every cell in that column Or use CSS
26
Setting a Background Color Table elements support the bgcolor attribute. To specify a background color for all of the cells in a table, all of the
cells in a row, or for individual cells, by adding the bgcolor attribute to either the <table>, <tr>, <td>, or <th> tags as follows:<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”> color is either a color name or hexadecimal color value
Or use CSS
28
Applying a Background Imageto a Table, Row, and Cell
parch.jpg
<table background=“parch.jpg”>
<tr background=“parch.jpg”>
<td background=“parch.jpg”>
30
Creating Web Forms Control elements
Elements in a form in which a user can enter information Input boxes Selection lists Option buttons Check boxes Group boxes Text areas Buttons
32
Form tag Surrounds all form related tags (input, textarea, etc.) SYNTAX
<form id=“formname” name=“formname” action=“page2.html” method=“get” >
other form elements go in between
</form>
34
Text boxes, Password boxes, Hidden boxes By default, displays 20 characters of text on a single line To change width, add width
<input type=“text” size="value“ value=“show me in box” width=“30”/><input type=“hidden” value=“show me in box” /><input type=“password” />
35
TextArea Used to display a tall and wide textbox SYNTAX
<textarea cols=“number” rows=“number”> content</textarea>
36
Radio button types Also called option buttons (buttons with circles)
SYNTAXFootball <input type=“radio” name=“mydot” value=“F” checked/>Baseball <input type=“radio” name=“mydot” value=“B” />Tennis <input type=“radio” name=“mydot” value=“T” />
Choose a sport:
Football ● Baseball o Tennis o
37
Checkbox button types Also called option buttons (buttons with circles)
SYNTAXFootball <input type=“checkbox” name=“box1” value=“Football” />Baseball <input type=“checkbox” name=“box2” value=“B” checked/>Tennis <input type=“checkbox” name=“box3” value=“Tennis” />
Choose a sport:
Football □ Baseball Tennis □■
38
Button types 3 types
Submit – sends web page to server Reset – clears all form fields Push – performs activity on web page
SYNTAX<input type=“submit” name=“submitButton” value=“Submit Form” /><input type=“button” name=“pushButton” onclick=“javascript functionx();” /><input type=“reset” name=“reset” value=“Reset Form” />
<script>functionx(){ statements …..}
</script>
39
HTML 5 HTML5 has several new input types for forms. These new features
allow better input control and validation. Color - used for input fields that should contain a color
Date - select a date
Datetime - select a date and time (with time zone)
datetime-local - select a date and time (no time zone)
Month - select a month and year
Time - select a time
Week - select a week and year
HTML 5
40 * - automatically validated
HTML5 has several new input types for forms. These new features allow better input control and validation. Email – an email address. *
Number - input fields that should contain a numeric value – can restrict values
Range - used for input fields that should contain a value from a range of numbers
Search - used for search fields (a search field behaves like a regular text field)
Tel – a telephone number
url - used for input fields that should contain a URL address *