I want to learn how do make a table… I want a certain number of rows and everything. Color… can somebody explain thorougly how to do these?
Sure i know tables…but theres pretty much to learn…
Mainly:
< table > is the main element of a table. This could be modified with for example width="", height="", cellpadding=“0”, cellspacing=“0”, borders=“0”
< tr > means table row, and is a table column. If you wish also to include different cells into this column you do that with < td >.
TD means table data, and is a cell. If you for instance use 3 cells in one column, you will have to use 3 cells in the column below also, otherwise it will look ****ed up, unless you use colspan=“x” in the table cell, where x is the number of cells you wish to span with one cell. In the same way you can make one cell spam across two (or more) columns with rowspan=“2”.
Into either < td > or < tr > you can chose to use:
bgcolor="#" for a hex-value of the cell or row background.
background="…" for a background image.
width=“x” to set row or cell width. pixels are default. add the % sign if you wish to set the value in percents.
height=“x” is the vertical substitute for width…
and there’s really a lot about this, so just specify if there’s anything more you wish to learn. But finally, i’ll include an example:
< table cellpadding=“0” cellspacing=“0” border=“1” width=“80” >
< tr >
< td width=“40” >Field1< /td >
< td width=“15” >2…< /td >
< td width=“25” >Field 3< /td >
< /tr >< tr >
< td width=“55” colspan=“2” >Field1 & 2< /td >
< td width=“25” >Field 3< /td >
< /tr >< /table >
The above will create the following:
<table cellpadding=“0” cellspacing=“0” border=“1” width=“80”>
<tr>
<td width=“40”>Field1</td>
<td width=“15”>2…</td>
<td width=“25”>Field 3</td>
</tr><tr>
<td width=“55” colspan=“2”>Field1 & 2</td>
<td width=“25”>Field 3</td>
</tr></table>
Again, if there’s anything, simply specify what you need to know.
Regardfully,
Can you make me a table like the one on this page?
http://www.mp3.com/okwerdaddeks
Please… that would help a lot. I can fill in the content and everything… Thanks
Eum…yeah, i suppose i could.
Do you mean the table that begins with the text “Play All Tracks Now!” and everything below? I’m of to school any second, but i’ll be right onto it as soon as i get time, thus please tell me before that if thats not the one you want, cuz thats the one i will try to make.
ok, seriously man, the whol f*ckin site is built by tables!
Here’s one of them, just enter the site and copy the source if theres anything else you want
<table width=270 border=0 cellpadding=3 cellspacing=0>
<tr bgcolor=#336699><td colspan=2 class=ttlbartxt><phrase><b>Artist Extras</b></phrase></font></td></tr>
<tr valign=top>
<td class=small align=right><li> </li></td>
<td><phrase><a href="http://www.mp3.com/OkWeRdADDeKs" target="_blank">Go to the artist's web site</a></phrase></td>
</tr>
<tr valign=top>
<td class=small align=right><li> </li></td>
<td><phrase><a href="http://reg.mp3.com/notifyme?task=artistmail&action=main&add_artist_id=195906">Notify Me with updates about this Artist</a></phrase></td>
</tr>
<tr valign=top>
<td class=small align=right><li> </li></td>
<td><phrase><a href="http://golocal.mp3.com/gir?genre_id=0007&geo_id=10056117">Find more artists in stockton, california - USA</a><br></phrase>
</td></tr>
<tr valign=top>
<td class=small align=right><li> </li></td>
<td><phrase><a href="http://genres.mp3.com/recommendation_radio/hip_hop_rap">More featured tracks in Hip Hop/Rap</a></phrase></td>
</tr>
<tr valign=top>
<td class=small align=right><li> </li></td>
<td><phrase><a href="http://www.mp3.com/whatsnew.html">Get More MP3.com Services</a><br></phrase>
</td></tr>
</table>
Tables are a necessity to learn. I don’t think you should copy and paste them. If you need to know how to work tables this is how it goes (i will add spaces between the <> signs so the board will not convert the HTML)…
This is an example of a new table with 1 row and 1 cell…
< table > - start new table
< tr > - start new table row
< td > - start new table data (table cell)
< /td > - end the table data
< /tr > - end the table row
< /table > - end the table
here is a live example of a new table with 3 rows and 3 cells in each row.
<table border=“1” bordercolor=“black”>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
</tr>
</table>
Yeah, i kinda agree with beta, there.
Tables are the key to a great site, but since you asked, i gave you the codes this time. I didnt mean for you to copy them, though, just to have them, i gave you the text so you could get better awareness about how tables work. Its never good to copy codes, sorry if i misguided you there.
Beta -
nice explaination of tables…
cudos…
Rev
Thank you reverendFlash.
Abraxxas: I knew what you were going after, I was just stating to Sykull that tables are an eccential of any web page and it is best to actually learn how to make one and what each part does then to copy and paste a table and change the content to your own:)
lostinbeta: agreed!
reverendFlash: if you wanna know tables you should also know some of the most common events:
cellpadding=“0”
cellspacing=“0”
^these set no space between the cells (written in TABLE)
border=“0” < obvious one, no? also in TABLE
width=“x” < pixel or % cell or row width
height=“x” < the vertical substitute for width
bgcolor="#…" < obvious
background="…" < could be used instead of bgcolor. it might look pretty good in corner-cells for example, if you have a bgpic which looks pretty much like one 4th of a circle. If you place one of them in each corner, colored the same color as the rest of the table bg, you will get a table which seems to have round edges… (like the one i used on a manowar fansite: http://www.humorprovider.0catch.com/manowar.jpg )
align=“right/left/center”
valign=“top/bottom/center”
i cant think of anything else you should need to know right now…good luck with the coding
Very good Abraxxas. Bravo…Bravo.
I could go more advanced with this, but I don’t want to be evil :evil:
We covered the basics, thats all they need to know right now. Anything else after that they can either ask or search the web:)
I used to teach HTML 3.0 way back when…
I was just saying lostinbeta did a very nice job of a quick explaination…
thanks though…
Rev
Well now Sykull has more info:)
One can never have too much info…
you guys are great!
so willing to help…
Rev
We try:)
I am so off to bed now. It is 3:30am. Not tired, but I am trying to get down more DHTML stuff and it is wearing my nerves thin. So I think I should take a break.