Using ASP to produce tables styled by CSS

by David Halls

A previous article showed how CSS can be used with tables. The resultant markup is simpler which also helps with programming, as a further article showed using javascript. In this article, we explore how a table can be generated by ASP from data in a comma-delimited text file (.csv) which could have been saved from a spreadsheet.

The data we are going to use is a 5-day weather forecast. Readers in warmer climates should not get alarmed - the data is for Scotland in early March.

Extracting the data using the FileSystemObject

Files are handled in VBScript using the FileSystem Object. We will assume that the file containing the data is in the same directory as the web page that shows it. We then create an instance of the FileSystemObject and then, from that, create a textstream object of the contents of the file using the OpenTextFile method. This has the attribute ForReading which is 1. We then need to read the file a line at a time and split each line into an array split by the delimiting commas.

At the end of the code, the stream is closed and the objects are tidied away by being set to nothing.

The basic code to carry this out and split the first line of the file into an array is shown below:-

<%
' Name file to read
Const Filename = "forecast.csv"	

' Create a filesystem object
Dim FSO, stream, linearray
set FSO = server.createObject("Scripting.FileSystemObject")
Set stream=FSO.OpenTextFile(Server.MapPath(Filename), 1)
linearray = split(stream.ReadLine, ",")
stream.Close

Set stream=Nothing
Set FSO=Nothing
%>

Combining the reading of the data with the production of the table

The contents of the forecast.csv file, which were saved from a spreadsheet, are shown below. The first two rows contain the header information, which are treated first.

Day,Max Temp,Min Temp,Wind,Visibility,Pressure,Relative Humidity
,(°C),(°C),(mph), ,(mb),
Friday,9,3,8,good,1002,67
Saturday,9,-1,14,moderate,1001,82
Sunday,8,2,22,moderate,1002,69
Monday,6,5,18,moderate,996,86
Tuesday,8,3,20,poor,990,73

1. To produce the table, we first need to open the table tag and give it an id (see code below). The table can be given a caption at this stage, if required.
2. The programme then uses a for..next loop to go through the first two rows putting the data between <th> ... </th> tags to form the heading rows in the table.
3. The remaining rows are created by looping through the remaining lines of data until the end of the textstream is reached (stream.AtEndOfStream = true).
4. The tag to close the table is written.
5. All of this is combined with the code to handle the file, read the lines and split the line ito an array as described above.

<%
Const Filename = "forecast.csv"	' file to read

' Create a filesystem object and textstream object
Dim FSO, stream, linearray, i, j
set FSO = server.createObject("Scripting.FileSystemObject")
Set stream=FSO.OpenTextFile(Server.MapPath(Filename), 1)

'create top of table
response.write "<table id = 'weathertable'>"
response.write "<caption>Weather Forecast</caption>"

' Get first two rows which are the header
for j = 0 to 1
linearray = split(stream.ReadLine, ",")
response.write "<tr>"
for i = 0 to ubound(linearray)
response.write "<th>" & linearray(i) & "</th>"
next
response.Write"</tr>"
next

'Read remaining rows
do while stream.AtEndOfStream = false
response.write "<tr>"
linearray = split(stream.ReadLine, ",")
for i = 0 to ubound(linearray)
response.write "<td>" & linearray(i) & "</td>"
next
response.write "</tr>"
loop

'Close table
response.Write"</table>"

'Tidy up
stream.Close
Set stream=Nothing
Set FSO=Nothing
%>

Styling the table

The style sheet to achieve this contains the following properties for the table and its cells.

#weathertable{
width:100%;
border-collapse: collapse;
background-color:#FFEFD5;
border: 1px solid #8B0000;
margin:0;
padding:0;
font-size:1.0em;
}

#weathertable th {
background-color:#8B0000;
color: white;
height:1.2em;
padding:0.4em;
text-align:center;
}

#weathertable td {
height: 2.0em;
text-align:center;
margin: 0;
width: auto;
border: 0;
color:black;
}

caption {
font-size:2.0em;
font-weight:bold;
padding-bottom: 0.5em;
color: #8B0000;
}

Setting the "border-collapse" property to "collapse" means that borders between adjacent cells are collapsed into one. To avoid a grid for the table, the border is set to 0 for the cells (td, th). However, setting a border property for the table only gives a border round the perimeter of the table, as used above.

The headers (th) are given a different color to the data cells (td)

Conclusions

This example uses ASP to retrieve data in a text-based .csv file but the same principles could be applied to data retrieved from a database. Using data tables with CSS allows the table markup to be kept clean and hence the programming is simpler.

References

1. ASP OpenTextFile Method, W3 Schools