CS174
Chris Pollett
Sep 9, 2020
Today, we continue our discussion of HTML and XHTML 5 by looking at the table and form tags.
Below is an example table we discussed last week:
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> <table> <caption>grade table</caption> <tr><td></td><th>Item</th><th>Value</th></tr> <tr><th>1.</th><td>Homeworks</td><td>50%</td></tr> <tr><th>2.</th><td>Exams</td><td>50%</td></tr> </table>
Item | Value | |
---|---|---|
1. | Homeworks | 50% |
2. | Exams | 50% |
Note: Although in this example we used the <style> tag immediately before the table, for this to be valid html, all style tags would need to be in the <head> of the document.
You can make table headings or table data span more than one column or more than one row using colspan, rowspan:
<tr><th colspan="3">heading</th></tr>
Here is an example where we have two levels of headings at the top of a table:
<tr><th colspan="2">heading</th></tr> <tr><th>subhead1</th><th>subhead2</th></tr> <tr><td>1</td><td>2</td></tr>
<table width="100%" border="0" summary="..." >the value can be a percentage or an absolute value in pixels. 0 here means no border.
<table width="100%" border="0" summary="..." > <col width="25%" /> <!-- can be a percentage or number of pixels --> <col width="75%" />
<tr align="center"><td>hi<td><td>there</td></tr> <!-- centers whole row -->
<td valign="top">test</td> <td valign="bottom">test</td>
<table border="5" cellspacing="30" cellpadding="5" summary="..." >
<form name="myform" method="get" action="http://somewhere.com/" > <!-- widgets or controls on form --> </form>
http://somewhere.com/?name1=value1&name2=value2...
<input type="text" name="my variable" value="optional default value" />
First Name: [ ]In order to ensure this in accessibility situations you must use the label tag:
<label for="testid" >First Name :</label> <input type="text" id="testid" name="test" value="test" />
<input type="text" id="search" name="search" title="Enter your search terms" placeholder="Enter your search terms"/>
<textarea name="life" rows="3" cols="40" > You can enter your life story here. </textarea>