Display XML in CSS and HTML

My XML structure looks a bit like this:

<Bookmark>
    <Type>Media</Type>
    <Name>YouTube</Name>
    <Link>http://ift.tt/1EVbjjJ;
</Bookmark>
<Bookmark>
    ...
</Bookmark>
...

What I want to do is to display in html a table where the bookmark Name is displayed in a column according to the Type of bookmark that it is (i.e. a column for media bookmarks, a column for work bookmarks etc) and that name is a link to the address provided by Link.

This is what I have so far (modified from w3schools):

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/bookmarks.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 

document.write("<table>");
var x = xmlDoc.getElementsByTagName("Bookmark");
for (i = 0; i < x.length; i++)
{ 
    document.write("<tr><td>");
    if (x[i].getElementsByTagName("Type")[0].childNodes[0].nodeValue == "Social")
    {
        document.write(x[i].getElementsByTagName("Name"[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    } 
}
document.write("</table>");
</script>

This displays all the social bookmarks as I wanted. The part I am struggling with is making the results a link and applying my CSS to them.

Maybe I am going about this the wrong way totally, any advice would be appreiciated (note: my next to do item is to allow a web based interface to add and delete bookmarks - is this possible using the same techniques as below or do I need to go into XQuery or something similar?)