User Tools

Site Tools


eg-259:xhtml

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Next revisionBoth sides next revision
eg-259:xhtml [2012/01/20 14:47] – [Table Rows and Cells] eechriseg-259:xhtml [2012/01/20 14:56] – [Exercises to Demonstrate Tables] eechris
Line 838: Line 838:
  
 ---- ----
-<code html>+<code html|An example of a simple table>
 <!DOCTYPE html> <!DOCTYPE html>
 <!-- table.html <!-- table.html
Line 954: Line 954:
   * Download the colspan/rowspan example: [[/eg-259/examples/lecture2/cell_span.html|cell_span.html]]. Here is the complete source code:   * Download the colspan/rowspan example: [[/eg-259/examples/lecture2/cell_span.html|cell_span.html]]. Here is the complete source code:
 <code html> <code html>
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html|An example to illustrate rowspan and colspan>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- cell_span.html <!-- cell_span.html
-     An example to illustrate rowspan and colspan +An example to illustrate rowspan and colspan 
-     --> +--> 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Rowspan and colspan </title>+  <head> 
 +    <meta charset="utf-8" /> 
 +    <title> Rowspan and colspan </title>
   </head>   </head>
   <body>   <body>
-<table border = "border"> +    <table border = "border"> 
-      <caption> Fruit Juice Drinks and Meals </caption>+      <caption> 
 +        Fruit Juice Drinks and Meals 
 +      </caption>
       <tr>       <tr>
         <td rowspan = "2"> &nbsp; </td>         <td rowspan = "2"> &nbsp; </td>
Line 998: Line 999:
 </html> </html>
 </code> </code>
- 
- 
-//**Tables – alignment**// 
- 
-  * The align attribute controls the horizontal placement of the contents in a table cell 
-    * ''align'' is an attribute of ''<tr>'', ''<th>'', and ''<td>'' elements 
-    * Values are ''left'', ''right'', and ''center'' (default) 
-      * note the American English spelling of ''center''. 
-  * The ''valign'' attribute controls the vertical placement of the contents of a table cell 
-    * ''valign'' is an attribute of ''<th>'' and ''<td>'' elements 
-    * Values are ''top'', ''bottom'', and ''center'' (default) 
-  * Example of cell alignment: [[/eg-259/examples/lecture2/cell_align.html|cell_align.html]] 
-<code html> 
-<?xml version = "1.0" encoding = "utf-8"?> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" 
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
- 
-<!-- cell_align.html 
-     An example to illustrate align and valign 
-     --> 
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
-  <head> <title> Alignment in cells </title> 
-  </head> 
-  <body> 
-<table border = "border"> 
-      <caption> The align and valign attributes </caption> 
-      <tr align = "center"> 
-     <th> </th> 
- <th> Column Label </th> 
- <th> Another One </th> 
- <th> Still Another One </th> 
-      </tr> 
-      <tr> 
-        <th> align </th> 
-        <td align = "left"> Left </th> 
-        <td align = "center"> Center </th> 
-        <td align = "right"> Right </th> 
-      </tr> 
-      <tr> 
-        <th> <br /> valign <br /> <br /> </th> 
-        <td> Default  </th> 
-        <td valign = "top"> Top </th> 
-        <td align = "bottom"> Bottom </th> 
-      </tr> 
-    </table> 
-  </body> 
-</html> 
-</code> 
- 
-//**Tables -- cell spacing**// 
- 
-  * The ''cellspacing'' attribute of ''<table>'' is used to specify the distance between cells in a table 
-  * The ''cellpadding'' attribute of ''<table>'' is used to specify the spacing between the content of a cell and the inner walls of the cell 
-  * Example: [[/eg-259/examples/lecture2/space_pad.html|space_pad.html]] 
-<code html> 
-<?xml version = "1.0" encoding = "utf-8"?> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" 
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
- 
-<!-- space_pad.html 
-     An example that illustrates the cellspacing and 
-     cellpadding table attributes 
-     --> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> 
-  <head> <title> Cell spacing and cell padding </title> 
-  </head> 
-  <body> 
-    <b>Table 1 (space = 10, pad = 30) </b><br /><br /> 
-    <table border = "5"  cellspacing = "10"  cellpadding = "30"> 
-      <tr> 
-        <td> Small spacing, </td> 
-        <td> large padding </td> 
-      </tr> 
-    </table> 
-    <br /><br /><br /><br /> 
-    <b>Table 2 (space = 30, pad = 10) </b><br /><br /> 
-    <table border = "5"  cellspacing = "30"  cellpadding = "10"> 
-      <tr> 
-        <td> Large spacing, </td> 
-        <td> small padding </td> 
-      </tr> 
-    </table> 
-  </body> 
-</html> 
-</code> 
- 
- 
 ===== Table Sections ===== ===== Table Sections =====
  
Line 1097: Line 1011:
     * You can make up the data cell values.     * You can make up the data cell values.
   - Modify, test and validate an XHTML document from Exercise 1 to add a second level column label, Tree, and a second-level row label, Characteristics.   - Modify, test and validate an XHTML document from Exercise 1 to add a second level column label, Tree, and a second-level row label, Characteristics.
-  - Create, test and validate an XHTML document to describe a table with columns for country, national language, capital city and population. There must be at least five countries in the table. You must include attribute specifications for cell padding and cell spacing.+  - Create, test and validate an XHTML document to describe a table with columns for country, national language, capital city and population. There must be at least five countries in the table.
  
  
eg-259/xhtml.txt · Last modified: 2012/02/01 20:18 by eechris