html，表格和间距问题
[英]html, table and spacing issues
问题描述
I want to make a html page which has a similiar appearance to windows 8 tiles. 
我想制作一个与Windows 8瓷砖外观相似的html页面。 However I keep getting stuck on making the most basic thing... tables 但是我一直坚持做最基本的东西...桌子
I basically want to make a table which covers the entire screen with some spacing between them and a gradient as the background of the table. 我基本上想制作一张桌子，覆盖整个屏幕，它们之间有一定的间隔，并以渐变作为桌子的背景。 anyway it seems to me like the code is not listening to what I am saying. 无论如何，在我看来，代码似乎没有听我在说什么。
I say I want the height of cells to be a certain value in percent and it just doesn`t do it. 我说我希望像元高度是某个百分比的确定值，而只是不这样做。 ALso I would like all cells to be of equal size (eg gradient background is equal) and not dependant on amount of text in them. 我也希望所有单元格的大小相等（例如渐变背景相等），而不依赖于其中的文本量。
Here is a wall of code... 这是一堵代码墙...
<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
height: 100%;
width: 100%;
}
table {
width:100%;
height:100%;
border-spacing: 10px;
border-collapse: separate;
}
tr {
width:25%
}
td {
height:16%
}
#brightgreen_tile {
background-image: -webkit-gradient(
linear,
left bottom,
left bottom,
color-stop(0, #17E35F),
color-stop(0.84, #8CFFB4)
);
background-image: -o-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: -moz-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: -webkit-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: -ms-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: linear-gradient(to left bottom, #17E35F 0%, #8CFFB4 84%);
}
</style>
</head>
<body bgcolor="#E6E6FA">
<table>
<tr>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzl1</font> </br>
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzl1</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
<td align="center">
<div id="brightgreen_tile">
<font size="6">shizzle</font> </br>
</div>
</td>
</tr>
</table>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2014-06-06 21:51:32
Lots of issues in html. HTML中有很多问题。 But the OP's answer is to remove 25% from TR and add height:100% to #brightgreen_tile. 但是，OP的答案是从TR中删除25％，并向#brightgreen_tile添加height：100％。 It should have been class and not ID. 它应该是类而不是ID。
#brightgreen_tile {
height:100%;
background-image: -webkit-gradient(linear, left bottom, left bottom, color-stop(0, #17E35F), color-stop(0.84, #8CFFB4));
background-image: -o-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: -moz-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: -webkit-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: -ms-linear-gradient(left bottom, #17E35F 0%, #8CFFB4 84%);
background-image: linear-gradient(to left bottom, #17E35F 0%, #8CFFB4 84%);
}
解决方案2
0 2014-06-06 21:48:00
Try this (I used Color:red) - I think it is this you want? 试试这个（我用过Color：red）-我想这是您想要的吗？
td {
height:16%;
background-color:red;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.