Outputting nicer HTML from XML using XSL

I'm calling the following XML feed;

http://www.google.co.uk/ig/api?weather=sydney

<?xml version="1.0"?>
<xml_api_reply version="1">
  <weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
    <forecast_information>
      <city data="Sydney, NSW"/>
      <postal_code data="sydney"/>
      <latitude_e6 data=""/>
      <longitude_e6 data=""/>
      <forecast_date data="2011-10-17"/>
      <current_date_time data="2011-10-17 17:07:00 +0000"/>
      <unit_system data="US"/>
    </forecast_information>
    <current_conditions>
      <condition data="Partly Cloudy"/>
      <temp_f data="63"/>
      <temp_c data="17"/>
      <humidity data="Humidity: 45%"/>
      <icon data="/ig/images/weather/partly_cloudy.gif"/>
      <wind_condition data="Wind: S at 22 mph"/>
    </current_conditions>
    <forecast_conditions>
      <day_of_week data="Mon"/>
      <low data="54"/>
      <high data="64"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Clear"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Tue"/>
      <low data="52"/>
      <high data="64"/>
      <icon data="/ig/images/weather/mostly_sunny.gif"/>
      <condition data="Mostly Sunny"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Wed"/>
      <low data="54"/>
      <high data="72"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Clear"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Thu"/>
      <low data="59"/>
      <high data="77"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Clear"/>
    </forecast_conditions>
  </weather>
</xml_api_reply>

Select allOpen in new window

Using this XSL

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="*/*">
        <div>
            <xsl:attribute name="id">
                <xsl:apply-templates select="." mode="id"/>
            </xsl:attribute>
            <xsl:apply-templates select="node()|@*"/>
        </div>
    </xsl:template>
    <xsl:template match="postal_code|latitude_e6|longitude_e6|temp_f"/>
    <xsl:template match="*" mode="id">
        <xsl:value-of select="concat(name(),'_data')"/>
    </xsl:template>
    <xsl:template match="forecast_information|current_conditions|
                         forecast_conditions|icon|forecast_date" mode="id">
        <xsl:value-of select="name()"/>
    </xsl:template>
</xsl:stylesheet>

Select allOpen in new window

Outputs this

<div id="weather_data">000100<div id="forecast_information"><div id="city_data">Sydney, NSW</div><div id="postal_code_data">sydney</div><div id="latitude_e6_data"></div><div id="longitude_e6_data"></div><div id="forecast_date">2011-10-17</div><div id="current_date_time_data">2011-10-17 17:30:00 +0000</div><div id="unit_system_data">US</div></div><div id="current_conditions"><div id="condition_data">Partly Cloudy</div><div id="temp_f_data">63</div><div id="temp_c_data">17</div><div id="humidity_data">Humidity: 48%</div><div id="icon">/ig/images/weather/partly_cloudy.gif</div><div id="wind_condition_data">Wind: S at 21 mph</div></div><div id="forecast_conditions"><div id="day_of_week_data">Mon</div><div id="low_data">54</div><div id="high_data">64</div><div id="icon">/ig/images/weather/sunny.gif</div><div id="condition_data">Clear</div></div><div id="forecast_conditions"><div id="day_of_week_data">Tue</div><div id="low_data">52</div><div id="high_data">64</div><div id="icon">/ig/images/weather/mostly_sunny.gif</div><div id="condition_data">Mostly Sunny</div></div><div id="forecast_conditions"><div id="day_of_week_data">Wed</div><div id="low_data">54</div><div id="high_data">72</div><div id="icon">/ig/images/weather/sunny.gif</div><div id="condition_data">Clear</div></div><div id="forecast_conditions"><div id="day_of_week_data">Thu</div><div id="low_data">59</div><div id="high_data">77</div><div id="icon">/ig/images/weather/sunny.gif</div><div id="condition_data">Clear</div></div></div>

Select allOpen in new window

How do I change the XSL to ouput better formatted HTML, as per below?

<div id="weather_data">000100
  <div id="forecast_information">
    <div id="city_data">Sydney, NSW</div>
    <div id="postal_code_data">sydney</div>
    <div id="latitude_e6_data"></div>
    <div id="longitude_e6_data"></div>
    <div id="forecast_date">2011-10-17</div>
    <div id="current_date_time_data">2011-10-17 17:30:00 +0000</div>
    <div id="unit_system_data">US</div>
  </div>
  <div id="current_conditions">
    <div id="condition_data">Partly Cloudy</div>
    <div id="temp_f_data">63</div>
    <div id="temp_c_data">17</div>
    <div id="humidity_data">Humidity: 48%</div>
    <div id="icon">/ig/images/weather/partly_cloudy.gif</div>
    <div id="wind_condition_data">Wind: S at 21 mph</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Mon</div>
    <div id="low_data">54</div>
    <div id="high_data">64</div>
    <div id="icon">/ig/images/weather/sunny.gif</div>
    <div id="condition_data">Clear</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Tue</div>
    <div id="low_data">52</div>
    <div id="high_data">64</div>
    <div id="icon">/ig/images/weather/mostly_sunny.gif</div>
    <div id="condition_data">Mostly Sunny</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Wed</div>
    <div id="low_data">54</div>
    <div id="high_data">72</div>
    <div id="icon">/ig/images/weather/sunny.gif</div>
    <div id="condition_data">Clear</div>
  </div>
  <div id="forecast_conditions">
    <div id="day_of_week_data">Thu</div>
    <div id="low_data">59</div>
    <div id="high_data">77</div>
    <div id="icon">/ig/images/weather/sunny.gif</div>
    <div id="condition_data">Clear</div>
  </div>
</div>

Select allOpen in new window