Tutorial 4: Designing a Web Page with Tables
Creating a News Page
Additional Topics
Binding a Table to a Data Source
Internet Explorer allows you to populate the contents of your Web page table using an external data source, such a text file or database. To reference the external data source, you must create a data source object (DSO).
One common DSO is the tabular data control (TDC) object which is used for delimited text files. The general syntax for creating a TDC DSO is:
<object classid=":333C7BC4-460F-11D0-BC04-0080C7055A83" id="id_name">
<param name="DataURL" value="URL">
<param name="FieldDelim" value="character">
</object>
where id_name is an id associated with the DSO, URL is the location and filename of the delimited text file, and character is the character used to separate one column from another in the text file. Let character = "	" for a tab delimiter.
There are other <param> values that you can specify to further control TDC DSO. You can find more information about the TDC DSO and other DSOs supported by Internet Explorer at http://msdn.microsoft.com/library/
.
Internet Explorer 5.0 provided another source for external data: XML files. The syntax for creating a DSO with an XML document is:
<xml id="id_name" src="URL"></xml>
where id_name is the id name assigned to the data source, and URL is the filename and location of the external XML file. For example, if the following XML document were stored in a file named “staff.xml”:
<?xml version="1.0" ?>
<staff>
<employee>
<first>John</first>
<last>Wallace</last>
<department>Sales</department>
</employee>
<employee>
<first>Linda</first>
<last>Sanchez</last>
<department>Advertising</department>
</employee>
<employee>
<first>Kevin</first>
<last>Grant</last>
<department>Sales</department>
</employee>
<employee>
<first>Chloe</first>
<last>MacDonald</last>
<department>Research</department>
</employee>
</staff>
you could attach this data source to your Web page using the tag:
<xml id="staff_data" src="staff.xml"></xml>
Once you've created a DSO for your Web page, you can use it to populate a Web page table. The syntax for populating a table is:
<table datasrc="#id_name">
<tr>
<td><span datafld="field1"></span></td>
<td><span datafld="field2"></span></td>
...
</tr>
</table>
where id_name is the id you've given to the data source, and field1, field2, and so forth are the field names from the data source. To create a table based on the data in the staff.xml file, you would enter the following HTML tags:
<table datasrc="#staff_data">
<tr>
<td><span datafld="first"></span></td>
<td><span datafld="last"></span></td>
<td><span datafld="department"></span></td>
</tr>
</table>
When the page is loaded by the Internet Explorer browser, the following table would be generated:
| John | Wallace | Sales |
| Linda | Sanchez | Advertising |
| Kevin | Grant | Sales |
| Chloe | MacDonald | Research |
with each employee automatically appearing in a different table row. If you update the contents of the staff.xml file, the table will display your changes the next time it is loaded by the browser.
Internet Explorer allows you to specify the number of records (or rows) that will be displayed at any one time from the data source, by using the datapagesize attribute of the <table> element. You can then write a JavaScript program to page through all of the rows of the data source. This is particularly useful for data sources that may contain hundreds of table rows.
You can learn more about data binding with tables at http://msdn.microsoft.com/library/ .
