Table Help

Forum Options:	my.neoforum register members prefs search faq

Topic: Table Help

Options: Print subscribe remove NeoPM

Threads List « Next Newest Next Oldest »

Skye

R.I.P Eth<3
N'Somniac

total posts: 4742
since: Aug 2007

Jun 02, 10 at 4:09pm ^

Table Help

Right so, in school I'm taking a computer class and right now we're doing HTML with Dreamweaver. I'm sure if anyone can help me, but if they can it'd be great. Pretty much, I'm suppose to make a table to look like a calender. Except it isn't working for me, and no one can find the problem. If anyone could point it out to me, I'd love them forever. ;3

Spoiler: Dreamweaver HTML Code

Highlight this box with your cursor to read the spoiler text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Les Tableaux et les Couleurs</title>
</head>

<body bgcolor="#FFFFFF" text="#000000>
<center>
<table border="5" width="250">
<tr align="center" valign="middle" bgcolor="aqua">
<th colspan=7 width="100%">J U I L L E T 2 0 0 1</th>
</tr>
<tr="center" valign="middle" bgcolor="lime">
<th width="14%" bgcolor="orange">D</th>
<th width="14%">L</th>
<th width="14%">M</th>
<th width="14%">M</th>
<th width="14%">J</th>
<th width="14%">V</th>
<th width="14%" bgcolor="orange">S</th>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange"> 1</td>
<td width="14%"> 2</td>
<td width="14%"> 3</td>
<td width="14%"> 4</td>
<td width="14%"> 5</td>
<td width="14%"> 6</td>
<td width="14%" bgcolor="orange"> 7</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange"> 8</td>
<td width="14%"> 9</td>
<td width="14%">10</td>
<td width="14%">11</td>
<td width="14%">12</td>
<td width="14%">13</td>
<td width="14%" bgcolor="orange">14</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange">15</td>
<td width="14%">16</td>
<td width="14%">17</td>
<td width="14%">18</td>
<td width="14%">19</td>
<td width="14%">20</td>
<td width="14%" bgcolor="orange">21</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange">22</td>
<td width="14%">23</td>
<td width="14%">24</td>
<td width="14%">25</td>
<td width="14%">26</td>
<td width="14%">27</td>
<td width="14%" bgcolor="orange">28</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange">29</td>
<td width="14%">30</td>
<td width="14%">31</td>
<td width="14%"> </td>
<td width="14%"> </td>
<td width="14%"> </td>
<td width="14%" bgcolor="orange"> </td>
</tr>
</table>
</center>
</body>
</html>

The problem is that instead of being centered, and seperated. It shows up just in one lign.

-------------------
“We are all a little weird and life’s a little weird, and when we find someone whose weirdness is compatible with ours, we join up with them and fall in mutual weirdness and call it love.”

― Dr. Seuss

quote quick quote edit quick edit del posts in thread report

Advertisement

Neoseeker

Sponsored message

Quierta

R.I.P. Ethna :( <3
(moderator)

Loungin'

total posts: 17902
neopoints: 453
since: Aug 2007

Jun 02, 10 at 6:18pm ^

re: Table Help

code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Les Tableaux et les Couleurs</title>
</head>

<body bgcolor="#FFFFFF" text="#000000>
<div style="text-align:center;">
<table border="5px" width="250px">
<tr align="center" valign="middle" bgcolor="aqua">
<th colspan="7" width="100%">J U I L L E T 2 0 0 1</th>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<th width="14%" bgcolor="orange">D</th>
<th width="14%">L</th>
<th width="14%">M</th>
<th width="14%">M</th>
<th width="14%">J</th>
<th width="14%">V</th>
<th width="14%" bgcolor="orange">S</th>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange"> 1</td>
<td width="14%"> 2</td>
<td width="14%"> 3</td>
<td width="14%"> 4</td>
<td width="14%"> 5</td>
<td width="14%"> 6</td>
<td width="14%" bgcolor="orange"> 7</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange"> 8</td>
<td width="14%"> 9</td>
<td width="14%">10</td>
<td width="14%">11</td>
<td width="14%">12</td>
<td width="14%">13</td>
<td width="14%" bgcolor="orange">14</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange">15</td>
<td width="14%">16</td>
<td width="14%">17</td>
<td width="14%">18</td>
<td width="14%">19</td>
<td width="14%">20</td>
<td width="14%" bgcolor="orange">21</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange">22</td>
<td width="14%">23</td>
<td width="14%">24</td>
<td width="14%">25</td>
<td width="14%">26</td>
<td width="14%">27</td>
<td width="14%" bgcolor="orange">28</td>
</tr>
<tr align="center" valign="middle" bgcolor="lime">
<td width="14%" bgcolor="orange">29</td>
<td width="14%">30</td>
<td width="14%">31</td>
<td width="14%"> </td>
<td width="14%"> </td>
<td width="14%"> </td>
<td width="14%" bgcolor="orange"> </td>
</tr>
</table>
</div>
</body>
</html>

There were a few syntax errors - you missed a few " around certain things, and you're using deprecated coding. I changed the <center> to <div> with a style and it started working immediately ;D

-------------------

This is Jeffrey the Dragon. He likes anime.

quote quick quote edit quick edit del posts in thread report

Skye

R.I.P Eth<3
N'Somniac

total posts: 4742
since: Aug 2007

Jun 02, 10 at 6:25pm ^

re: Table Help

Yay! It works great now, thanks so much. ;3

quote quick quote edit quick edit del posts in thread report

Quierta

R.I.P. Ethna :( <3
(moderator)

Loungin'

total posts: 17902
neopoints: 453
since: Aug 2007

Jun 02, 10 at 9:35pm ^

re: Table Help

code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
     text-align:center;
}

td {
     width:14%;
}

th {
     width:14%;
}

tr {
     valign:middle;
     text-align:center;
     background-color:lime;
}

table {
     width:250px;
}

.tdor {
      background-color:orange;
}

#head {
      background-color:aqua;
     text-align:center;
}
</style>

<title>Les Tableaux et les Couleurs</title>

</head>
<body>

<table border="5px;" align="center">

	<tr id="head">
		<th colspan="7">J U I L L E T 2 0 0 1</th>
	</tr>

	<tr>
		<th class="tdor">D</th>
		<th>L</th>
		<th>M</th>
		<th>M</th>
		<th>J</th>
		<th>V</th>
		<th class="tdor">S</th>
	</tr>

	<tr>
		<td class="tdor">1</td>
		<td> 2</td>
		<td> 3</td>
		<td> 4</td>
		<td> 5</td>
		<td> 6</td>
		<td class="tdor"> 7</td>
	</tr>

	<tr>
		<td class="tdor"> 8</td>
		<td>9</td>
		<td>10</td>
		<td>11</td>
		<td>12</td>
		<td>13</td>
		<td class="tdor">14</td>
	</tr>

	<tr>
		<td class="tdor">15</td>
		<td>16</td>
		<td>17</td>
		<td>18</td>
		<td>19</td>
		<td>20</td>
		<td class="tdor">21</td>
	</tr>

	<tr>
		<td class="tdor">22</td>
		<td>23</td>
		<td>24</td>
		<td>25</td>
		<td>26</td>
		<td>27</td>
		<td class="tdor">28</td>
	</tr>

	<tr>
		<td class="tdor">29</td>
		<td>30</td>
		<td>31</td>
		<td></td>
		<td></td>
		<td></td>
		<td class="tdor"></td>
	</tr>

</table>

</body>
</html>

Ok I just spaced it out a little more so it's easier to read ;D

Also! I fixed some of the deprecated coding, coding that will no longer work in the future, along with coding that really isn't needed, and replaced them with styles. That <style type="text/css"> thing is an internal stylesheet.

So for an example...

code

th {
     width:14%;
}

Everything inside the 'th' element is going to have a width of 14%.

code

table {
     width:250px;
}

Everything inside the 'table' element is going to have a width of 250px.

Do you understand that part?

Then you can also make your own, which is what I did with #head. You can make it anything, really, but you should make it something that makes sense for what you're gonna use it for. You put # in front of the word and that makes it an ID. Or you can put ' . ' in front of it, like .head and it'll make it a class. IDs can be used once on a page, classes can be used as many times as you want.

So you define your ID:

code

#head {
      background-color:aqua;
      text-align:center;
}

The #head ID will have a background color of aqua and it'll be centered.

Then you have to say which part of the code will be used for #head.

code

<tr id="head">
		<th colspan="7">J U I L L E T 2 0 0 1</th>
	</tr>

So you say "this tr ID is head," and notice that you don't carry over the #.

If you took away id="head" then everything inside that small section isn't going to be aqua or centered - unless you have the whole page centered (which we do) so technically you don't even need the centered alignment there.

Basically all of this is just giving you less code and it's doing the same thing - and it's also making it cleaner and easier to read =D So now if you ever want to change all of your background colors or anything, ALL you have to do is change the CSS and it'll change ALL of them for you instead of you having to go in and specify every single one by hand.

Also!

code

<body bgcolor="#FFFFFF" text="#000000>

You don't need to do this because, by default, the background is always white and the text is always black =D

I'm gonna warn you that some of the codes might not be 100% correct, or there might be better ways to do them ;D I don't really work with tables at ALL so I'm not *completely* sure how they function, but what I said about classes/IDs/how to do it should work just fine.

-------------------

This is Jeffrey the Dragon. He likes anime.