XHTML and CSS by ojp13483

VIEWS: 185 PAGES: 23

									C H A P T E R 7-Using Tables
 The Basics of Tables

 ...
 <table>
 <tr>
 <td>Row 1 Cell 1</td>
 <td>Row 1 Cell 2</td>
 <td>Row 1 Cell 3</td>
 </tr>
 <tr>
 <td>Row 2 Cell 1</td>
 <td>Row 2 Cell 2</td>
 <td>Row 2 Cell 3</td>
 </tr>
 </table>
 ...


                        Hamidreza Talebi- info@vdsoft.ir
C H A P T E R 7-Using Tables
Optional Attributes
• frame:
• rules:
• summary: Specifies a summary of the tables for special browsers that
provide speech synthesizing and nonvisual capabilities. If you need to
use a table for layout purposes,you shouldn’t use the summary
attribute, as it will confuse the nonvisual browser user.
• width:
• border: Specifies the width of a table’s border in pixels.
• cellpadding: Specifies the amount of space between the cell walls
and the content
in pixels or as a percent.
• cellspacing: Specifies the amount of space between cells in pixels or
as a percent.




                        Hamidreza Talebi- info@vdsoft.ir
       C H A P T E R 7-Using Tables
<td>
• abbr: Specifies a shortened version of the content in a cell. You use this optional
attribute to provide nonvisual browsers a shortened version of long content.
• align: center, char, justify,left, and right
• axis: Places a cell into conceptual categories. These categories form an axis in
an n-dimensional space. User agents can then give users access to the categories.
• char: Specifies which character the text should be aligned on. This requires the
use of the align attribute with the value set as char.
•charoff: Specifies in pixels or as a percentage how far the alignment should be
adjusted to the first character to align on. This requires the use of the align
attribute with the value set as char.
• colspan: Specifies the number of columns this cell should occupy.
• rowspan: Indicates the number of rows this cell should occupy.
• scope: Specifies if a cell provides header information for the rest of the row that
contains it or for the rest of the column. Valid values are col, colgroup, row, and
rowgroup.
• valign: baseline,bottom, middle, and top.



                               Hamidreza Talebi- info@vdsoft.ir
        C H A P T E R 7-Using Tables
<caption>
<table border="1" summary="Prices for types of pizza by size">
<caption>Our Pizza Selections</caption>
<tr>
<td scope="col">Pizza Type</td>
<td scope="col">Small</td>
<td scope="col">Medium</td>
<td scope="col">Large</td>
</tr>
<tr>
<td>Thin Crust</td>
<td>3.99</td>
<td>4.99</td>
<td>6.99</td>
</tr>
<tr>
<td>Deep Dish</td>
<td>4.99</td>
<td>6.99</td>
<td>8.99</td>
<tr>
<td>Stuffed Crust</td>
<td>5.99</td>
<td>7.99</td>
<td>9.99</td>
</tr>                                Hamidreza Talebi- info@vdsoft.ir
</table>
           C H A P T E R 7-Using Tables
<table border="1" summary="Prices for types of pizza by size">
<caption>Our Pizza Selections</caption>
<tr>
<th rowspan="5" scope="row">Pizza<br />Type</th>
<th colspan="4" scope="col">Size</th>
</tr>                                         <tr>
<tr>
                                              <td>Stuffed Crust</td>
<th></th>
<th scope="col">Small</th>                    <td>5.99</td>
<th scope="col">Medium</th>                   <td>7.99</td>
<th scope="col">Large</th>                    <td>9.99</td>
</tr>                                         </tr>
<tr>                                          </table>
<td scope="row">Thin Crust</td>
<td>3.99</td>
<td>4.99</td>
<td>6.99</td>
</tr>
<tr>
<td scope="row">Deep Dish</td>
<td>4.99</td>
<td>6.99</td>
<td>8.99</td>
</tr>                                Hamidreza Talebi- info@vdsoft.ir
             C H A P T E R 7-Using Tables
<table summary="This table provides the pricing      <style type="text/css">
information for pizzas">                             td {border:1px solid black;}
<caption>Our Pizza Selections</caption>
                                                     table {border:1px solid black;}
<thead>
<tr>                                                 td.number{text-align: right;color: blue;}
<th scope="col">Pizza Type</th>                      td.text{text-align: left;}
<th scope="col">Small</th>                           </style>
<th scope="col">Medium</th>
<th scope="col">Large</th>
</tr>                                             <tr>
</thead>                                          <td class="text" scope="row">Stuffed Crust</td>
<tbody>                                           <td class="number">5.99</td>
<tr>                                              <td class="number">7.99</td>
<td class="text" scope="row">Thin Crust</td>      <td class="number">9.99</td>
<td class="number">3.99</td>                      </tr>
<td class="number">4.99</td>                      </tbody>
<td class="number">6.99</td>                      </table>
</tr>
<tr>
<td class="text" scope="row">Deep Dish</td>
<td class="number">4.99</td>
<td class="number">6.99</td>
<td class="number">8.99</td>
</tr>
        C H A P T E R 7-Using Tables
<style type="text/css">
td {border:1px solid black;}
table {border:1px solid black;}
td.number{text-align: right;color: blue;padding:
2px,6px,2px,6px;}
td.text{text-align: left;padding:
2px,6px,2px,6px;}
</style>




                                Hamidreza Talebi- info@vdsoft.ir
        C H A P T E R 7-Using Tables
<style type="text/css">
td, th {border-style: groove;}
table {border-style: groove;border-collapse:collapse;}
</style>




                                Hamidreza Talebi- info@vdsoft.ir
  C H A P T E R 7-Using Tables
Adding Backgrounds to Tables

<style type="text/css">
td, th {border-style: groove;}
table {border-style: groove;border-collapse:
collapse;}
tr.hlRow td, th {background-color: #eee;}
tr.regRow td {background-color: #fff;}
</style>




                          Hamidreza Talebi- info@vdsoft.ir
C H A P T E R 9- ADDING S TYLE TO YOUR DOCUMENTS: CSS

Units of Measure




                   Hamidreza Talebi- info@vdsoft.ir
C H A P T E R 9- ADDING S TYLE TO YOUR DOCUMENTS: CSS




                   Hamidreza Talebi- info@vdsoft.ir
C H A P T E R 9- ADDING S TYLE TO YOUR DOCUMENTS: CSS
<body>
                    p {border-width: thin;border-style: solid;
<p class="red">
                    height: 100px; width: 100px;text-align:
Container 1
                    center}
</p>
                    p.red {background-color: red; position:
<p class="white">
                    relative; left: 0;}
Container 2
                    p.white {background-color: white; position:
</p>
                    relative; top: -100px;left: 50px;}
<p class="blue">
                    p.blue {background-color: blue; position:
Container 3
                    relative; top: -200px;left: 100px;}
</p>
</body>
    C H A P T E R 9- ADDING S TYLE TO YOUR DOCUMENTS: CSS
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Using z-index</title>
<link href="z-order.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p style="background-color: red; position: relative; left: 0;z-index: 10">
Container 1
</p>
<p style="background-color: white; position: relative; top: -100px;
left: 50px;z-index: 5">
Container 2
</p>
<p style="background-color: blue; position: relative; top: -200px;
left: 100px;z-index: 0">
Container 3
</p>
</body>
</html>
   C H A P T E R 9- ADDING S TYLE TO YOUR DOCUMENTS: CSS

Styling Text
 C H A P T E R 9- ADDING S TYLE TO YOUR DOCUMENTS: CSS


p {font-weight: bold}
           C H A P T E R 10-Client-Side Scripting Basics

Placement of JavaScript

 <head>
 <title>JavaScript Basics</title>
 <script ype="text/javascript">
 alert("This is a sample of inline Javascript");
 </script>
 </head>


Using an External File for JavaScript
<head>
<title>JavaScript Basics</title>
<script src="myscript.js" type="text/javascript">
</script>
</head>
          C H A P T E R 10-Client-Side Scripting Basics

Using Variables
iAge=37;
sLanguage1 = "JavaScript";
_bDone = true;
              C H A P T E R 10-Client-Side Scripting Basics

<html>
<head>
<title>JavaScript Basic If</title>
<script type="text/javascript">
var iAge;
iAge = prompt("Please enter your age i years.",0);
if(iAge > 20)
{
//The value tested true
alert("You are over 20 years of age");
//more statements can follow here
}
</script>
</head>
<body>
</body>
</html>
          C H A P T E R 10-Client-Side Scripting Basics
Looping


 for (loop init;test condition;increment loop
 counter)
 {
 code to be executed
 }
          C H A P T E R 10-Client-Side Scripting Basics
Looping
<html>
<head>
<title>JavaScript for loop</title>
<script type="text/javascript">
var sNewLine = "<br />";
document.write("for loop is starting" + sNewLine);
for (var iCount=0;iCount<=10;iCount++)
{
document.write("iCount = " + iCount);
document.write(sNewLine);
{
document.write("for loop completed");
</script>
</head>
<body>
</body>
</html>
        C H A P T E R 10-Client-Side Scripting Basics
Functions
 function name(arguments) {
 one or more statements go here
 }

function addTwoNumbers(value1,value2) {
return value1 + value2;
}
        C H A P T E R 10-Client-Side Scripting Basics
Functions

  <!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
  <head>
  <title>JavaScript inline Events</title>
  <script type="text/javascript">
  function fn_load()
  {
  alert("Page has been loaded!");
  {
  </script>
  </head>
  <body onload="fn_load()">
  </body>
  </html>

								
To top