Space的内建相册存在以下几个明显的缺点：
v 不支持相片标题和描述的直观显示；
v 无法对相册或相片进行评论；
v 显示速度慢，需要控制进度按钮来加载；
v 无法同时直观地查看所有相片的缩略图（通过RSS方式可以查看相片缩略图，但是当相册相片很多时只能看到部分相片）；
针对以上这些弊端，下面提供了自己建立自定义相册的方法：
1 演示
蓝天、阳光、河水、林荫......好美的大自然，我照得还不错吧^_^
示例相册
| 华盛顿风光1 |
华盛顿风光2 |
华盛顿风光3 |
 |
 |
 |
| 点击缩略图片显示完整图片。 |
点击缩略图片显示完整图片，鼠标在相片内外分别停留一下看看^_^ |
点击缩略图片显示完整图片，并可以对该图片进行评论。 |
|
| 华盛顿风光4 |
夏威夷风光 |
路 |
 |
 |
 |
| 点击缩略图片显示完整图片。 |
点击缩略图片显示完整图片。 |
点击缩略图片显示完整图片。 |
2 概念及基础知识
相册是采用表格布局来展示的。
虽然通过在设计模式下编辑日志比较方便，但如果想实现对相册格式的精确灵活控制，必须采用html编辑方式。本文介绍的方法都是在html编辑模式下进行的。
本部分将介绍与自定义相册相关的html知识，虽然介绍仅限于表格，但我展示的是一些基本概念和方法，对于其他的html语法也很类似，因此如果你想对html编辑举一反三，建议详细阅读。
2.1 表格结构
表格主要是由caption（表示表格名称）、table（表示表格）、tr（表示行）、th（表示标题单元格）、td（表示正文单元格）等html元素组成的，其html结构如下：
<table>
<caption>表格名称</caption>
<tr><th>标题第一列的内容</th><th>标题第二列的内容</th><th>标题第三列的内容</th><tr>
<tr><td>正文第一行第一列的内容</td><td>正文第一行第二列的内容</td><td>正文第一行第三列的内容</td><tr>
<tr><td>正文第二行第一列的内容</td><td>正文第二行第二列的内容</td><td>正文第二行第三列的内容</td><tr>
</table>
2.2 html元素样式
元素的样式可以通过属性或者style进行设置，并且两种方法通常都有互相替代的办法。考虑到浏览器的通用性用属性来设置样式是更好的方式，但用style设置样式可以实现更加灵活强大的功能。在下面的设置中，将同时采用这两种方式。
样式语法如下所示：
<html元素名称 style="样式1名称:样式1值;样式2名称:样式2值;" 属性1名称＝"属性1值" 属性2名称＝"属性2值" >
样式和属性都支持0到多个，如果不设置某个属性或样式，浏览器将按照缺省值进行显示。
3 代码及扩展
3.1 演示代码
下面这段代码就是实现前面演示效果的html代码：
<table align="center" width="99.7%" title="这是一个示例相册" cellspacing="8" style="font-size:12px;border:1px solid black;">
<caption style="font-size:14px;font-weight:bold;">
示例相册
</caption>
<tr style="vertical-align:middle;">
<th width="33%">
华盛顿风光1
</th>
<th width="33%">
华盛顿风光2
</th>
<th>
华盛顿风光3
</th>
</tr>
<tr style="vertical-align:bottom;">
<td align="center" style="filter:DropShadow(color=#888888,offX=3,offY=3);">
<a target="_blank" href="http://storage./x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nudbOiJ9LlaQbrtwAKUdmibXkG1_-TyM25GJh8CN4lyMxdPxInV3yuPz7_zrClDkPEZZNe7JQM0kA">
<img border="0" alt="这是第一张图片" src="http://image17.360doc.com/DownloadImg/2010/11/1814/6901550_1"></a>
</td>
<td align="center" style="filter:DropShadow(color=#888888,offX=3,offY=3);">
<a target="_blank" href="http://storage./x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nso-qNp0dlCe8lCfzAqx7oXffbwOYu4krtTLThWtAjhnhhM-UwsESms478qYOzS4abIDLjXOXcMrQ">
<img border="0" alt="这是第二张图片" src="http://image17.360doc.com/DownloadImg/2010/11/1814/6901550_2"></a>
</td>
<td align="center" style="filter:DropShadow(color=#888888,offX=3,offY=3);">
<a target="_blank" href="http://spaces./members/huangmj/Blog/cns!1pB4_US3q-4ElAZk8eanGEAg!1889.entry">
<img border="0" alt="这是第三张图片" src="http://image17.360doc.com/DownloadImg/2010/11/1814/6901550_3"></a>
</td>
</tr>
<tr style="vertical-align:top;">
<td>
点击缩略图片显示完整图片。
</td>
<td>
点击缩略图片显示完整图片，鼠标在相片内外分别停留一下看看^_^
</td>
<td>
点击缩略图片显示完整图片，并可以对该图片进行评论。
</td>
</tr>
<tr style="vertical-align:middle;">
<td colspan=3>
<hr>
</td>
</tr>
<tr style="vertical-align:middle;">
<th>
华盛顿风光4
</th>
<th>
夏威夷风光
</th>
<th>
路
</th>
</tr>
<tr style="vertical-align:bottom;">
<td align="center" style="filter:DropShadow(color=#888888,offX=3,offY=3);">
<a target="_blank" href="http://storage./x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nvGktk-ipXZJG4RdbjncC2vcNQKyXTOA8ngMvDYTed-9o8uPd83tg0hZ0JxjOSF3ebjaHNRiFCIOg"><img border="0" alt="这是第四张图片" src="http://image17.360doc.com/DownloadImg/2010/11/1814/6901550_4"></a>
</td>
<td align="center" style="filter:DropShadow(color=#888888,offX=3,offY=3);">
<a target="_blank" href="http://storage./x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nvBl07m_f7inHY6BqdOzFHffY3yr5mcZp0JGIHvZHYXt1tTMf-5XNOn3kV4z4TRpyQZI8hgQ4jyoQ">
<img border="0" alt="这是第五张图片" src="http://image17.360doc.com/DownloadImg/2010/11/1814/6901550_5"></a>
</td>
<td align="center" style="filter:DropShadow(color=#888888,offX=3,offY=3);">
<a target="_blank" href="http://storage./x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2ntZU0rLUSMq6wu2GqtiPxJ8C0VPoKdhQkeH-D0z9aDXiEHuRe8DQXX8xiq8SHotP_Ecnw6_w5pIMg">
<img border="0" alt="这是第六图片" src="http://image17.360doc.com/DownloadImg/2010/11/1814/6901550_6"></a>
</td>
</tr>
<tr style="vertical-align:top;">
<td>
点击缩略图片显示完整图片。
</td>
<td>
点击缩略图片显示完整图片。
</td>
<td>
点击缩略图片显示完整图片。
</td>
</tr>
</table>
3.2 主要属性和样式参考
v 主要属性参考
cellspacing（单元格之间的距离）（table）：数值；
background（背景图片）（table）：图片链接地址；
bgcolor（背景色）（table）：颜色代码；
width（宽度）（table，th，td）：数值或百分比；
align（对齐方式）（table，th，td）：left（左对齐）、center（居中）、right（右对齐）；
title（帮助文本）（table，th，td）：鼠标停留时显示的文本；
target（链接目的窗口）（a）：_blank（弹出新窗口）、_self（当前窗口）；
href（资源链接地址）（a）；
border（边框宽度）（img）：数值；
alt（替换文本）（img）：图片加载前和鼠标停留时显示的文本；
src（图片地址）（img）；
v
主要样式参考
font-size（字体大小）：数值；
font-weight（字体粗细）：normal、bold、bolder、lighter；
color（字体颜色）：色彩代码；
border（边框）、border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
vertical-align:baseline、top、middle、bottom；
filter（滤镜效果）：具体信息请参考《图片套用滤镜效果》。
v 可惜的是编辑器既不支持table元素的cellpadding（单元格内容到单元格边框的距离），也不支持样式中的padding,padding-left,padding-right,padding-top,padding-bottom属性，因此很难设置表格中的文字边距，本文是采用变通的方法实现的：设置cellspacing；去除单元格之间的边框线；在行之间增加线段。
v 关于HTML元素属性和样式更加全面详细的参考请到《微软MSDN》中查找。
3.3 其他要点
v 相片上载和内建相册的隐藏
相片的上载仍然需要以相册的方式上载，上载完成后，如果不希望显示Space内建的相册，可以在"自定义"-"模块"中删除相册模块，即可隐藏内建相册。
v 获取缩略相片地址和完整相片地址
在"设置"-"存储"页面可以查看到所有相片的缩略图。
在相片上单击鼠标右键选择"属性"，在弹出的窗口中显示的"地址"后的文本就是缩略相片地址。
在文件名称链接上单击鼠标右键选择"属性"，在弹出的窗口中显示的"地址"后的文本就是完整相片地址。
v 单击相片展示完整相片的方式
单击相片有两种展示完整相片的方式，一种是直接链接到完整相片，另外就是为每个相片都分别建立日志。
前者实现起来很简单，直接添加完整相片的地址即可。
后者需要建立日志，但可以保留【相片评论】。
v 留言的保存
可以为每个相册建立一篇日志，也可以为多个相册建立一篇日志，由于日志支持评论，因此也就具有了保存【相册评论】的功能。
如果想保留【相片评论】，就必须为每个相片分别建立日志。
v 置顶或显示在主页
如果不打算在Space主页显示相册的所有相片，只是挂上一个链接，那么可以将相册日志的地址加到某个列表模块的项目中即可；
如果需要在Space主要显示所有相片，甚至希望置顶，那么由于Space总是新发布的日志在最上面，因此相册迟早是要被挤下去的，因此需要经常地删除重发布，使其显示在主页或置顶，但这样带来的问题就是如何保存【相册评论】，建议的方式是将日志的评论行隐藏，就像本空间的置顶日志一样，然后在相册中增加一个留言的链接，链接到留言本即可。
关于手动置顶的内容请参考《爬山虎的Space技巧提高篇》 。
关于隐藏评论行的内容请参考《如何隐藏日志标题和评论行？》。
