html, table and spacing issues
Question
I want to make a html page which has a similiar appearance to windows 8 tiles. 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 answers
solution1
1 ACCPTED 2014-06-06 21:51:32
Lots of issues in html. But the OP's answer is to remove 25% from TR and add height:100% to #brightgreen_tile. It should have been class and not 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%);
}
Here is the Fiddle
solution2
0 2014-06-06 21:48:00
Try this (I used Color:red) - I think it is this you want?
td {
height:16%;
background-color:red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.