by dark_fanboyWell, as promised to Jame I’ll be posting how to make those snazzy tables for your guides. For this you’re going to need to know a little HTML coding. Thankfully CSS will still work within your HTML codes but you have to be extra careful because if you miss a tag you will botch the entire thing. Trust me, I made a serious error on my last guide and the whole page went funky. Took me an hour to find that missing tag! That said, lets begin.
For those unfamiliar with HTML a good site to check out is www.w3schools.com, there is a link that says Learn HTML on the top left.
First things first! Tags! Tags! TAGS! Pay close attention to your tags. You need an opening tag and a closing tag. Your tags will be surrounded by Angle Brackets < and >. Now you could just drop a table right into your guide but CSS has issues with doing that, or at least it does here. I’m still a novice when it comes to XML and CSS coding so bear with me. Its safer to start AND end your table with an html tag.
Example: < HTML > and < /HTML >
NOTE: When you create your tags there will be no spaces inside the tag, I have to do that here so you can actually see them. Please look at the whiteboard on w3schools.com for a proper representation.
Our opening tag is < HTML > and our closing tag is < /HTML >. The tags are identical except for the forward slash in the ending tag. So your tags will always have a mate, be sure you always have a closing tag! Next comes the BODY tag. The body is what it is, the meat and potatoes or your document.
Example:
Everything will go inside your HTML tags and your displayed material will be inside your BODY tags.
Example:
HI! This is my website. What do you think?
Now try not to get discouraged here, coding is a simple thing. These will be the only HTML tags you will need while building your table. The next set of tags will be a little more complicated but fairly simple. These will be your TABLE tags.
Example:
HI! This is my website. What do you think? Here is a table.
Now, here is where CSS and HTML start to disagree. You’ll note that I’ve added in a tag that I haven’t talked about, < BR > is a line break tag and is similar to you hitting Enter on the keyboard. So why not just hit enter? HTML does not recognize word processing line breaks so you have to use the line break tag < BR >. I already have several of these tags listed here but you won’t see them at work.
Back to our table. As you create your table you will have to define several things. First are borders. If you do not define the border size you will have a nice neat table but no dividing lines.
Example:
| Col1,Row1 | Col2,Row1 | Col3,Row1 |
| Col1,Row2 | Col2,Row2 | Col3,Row2 |
If you wish to create dividing lines you will need to define the border size in your opening TABLE tag.
Example:
< TABLE BORDER=”1″ >
| Col1,Row1 | Col2,Row1 | Col3,Row1 |
| Col1,Row2 | Col2,Row2 | Col3,Row2 |
Now I know I said to never put spaces in your tags, but there will be a few exceptions. Make sure to leave a space between each definition in your tag, such as the one between TABLE and BORDER in the opening table tag.
The BORDER definition tells the browser to load a table border width of 1, a single pixel line usually. You can certainly go higher and you can do some pretty fancy things with your table borders that I will not go in depth here.
Now if you’ve seen my blacksmithing guide you’ll note there is a light gray underline at the top of my table and the text is in bold. This is done by adding a HEADER tag.
Example:
| Header1,Col1 | Header2,Col2 | Header3,Col3 |
|---|---|---|
| Col1,Row1 | Col2,Row1 | Col3,Row1 |
| Col1,Row2 | Col2,Row2 | Col3,Row2 |
By now you’re probably like WHOA NOW! How did you even create the Columns and Rows, you’re talking headers and such, I’m so lost! Fret not. Your ROW tags are like BODY tags, everything in that row will be contained within the ROW tag. A ROW tag looks like this: < TR > and a closing tag of < /TR >
Example:
< HTML > < BODY >
HI! This is my website. What do you think? Here is a table.< BR >
| I’m ROW 1! |
| I’m ROW 1! |
You’re probably wondering what’s up with that < TD > tag? That is essentially how we create columns. The < TD > is a Table Data tag. Each time you ad a new < TD > tag you create a new cell of data. You want to make sure that you keep a static number of DATA tags or you will end up with blank cells.
Example:
| Col1,Row1 | Col2,Row1 | Col3,Row1 | |
| Col1,Row2 | Col2,Row2 | Col3,Row2 | Col4,Row2 |
| Col1,Row3 | Col2,Row3 | Col3,Row3 |
Blank cells aren’t the end of the world, but at least your columns are still even. And that is nearly everything.
All we need now are some headers and you’re golden. Header tags are simple: < TH > just means Table Header. You can use these to define a bold text and a different shaded underline.
Example:
| Header1,Col1 | Header2,Col2 | Header3,Col3 |
|---|---|---|
| Col1,Row1 | Col2,Row1 | Col3,Row1 |
| Col1,Row2 | Col2,Row2 | Col3,Row2 |
And you’re done! Hopefully I’ve made this easy enough. If you have any questions please feel free to ask and I’ll do my best to answer them in a timely manner as always.
Size is a major factor in life and a factor that I seemed to have missed when creating this guide. Here is an example of how you can use the page width to determine the width of your table. This will assign a maximum width based on the current page width.
Example:
| I’m huge! |
| I’m huge! |
Example:
| I’m tiny! |
| I’m tiny! |
I think (not positive), thatI think (not positive), that when it comes to percentage with tables, that it needs to be CSS, otherwise it would be like your example.
I used CSS in my tables on my Archaeology guides, and using 50% actually worked. Like I said, not sure if that is the reason or not.
{
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
width:50%;
border-collapse:collapse;
}
Strange, I have two monitors,Strange, I have two monitors, one with both screen resolutions you mention and I can see borders on both screens.
I’m on a 1280×1024. It doesI’m on a 1280×1024. It does sound like it could be a resolution issue.
So am I actually. I justSo am I actually. I just checked my laptop though, and the borders show up fine there too, so I guess it’s something isolated to this computer…
I’m pondering if it might be a resolution thing, since the resolution on my desktop is 1680×1050 while on the laptop it’s 1024×768. That’s about the only thing I can really think of being different between the two computers besides obvious hardware differences.
I’m on Firefox if that helps.I’m on Firefox if that helps.
Well, the width thing isn’tWell, the width thing isn’t entirely a huge deal, like I said, there is a workaround for that (just bloats the code, but not entirely bothersome otherwise). But that odd missing borders thing is bugging the heck out of me. I’ll check to see if it pops up on my laptop I guess, since you said you didn’t notice any missing borders, might just be some weird thing on my end somehow…
Hmmm, I’m seeing the bordersHmmm, I’m seeing the borders on the tables in the examples. However, I see what you meen about the width. Unfortunately I don’t really have a way (or knowledge of how) to muck about with the site display settings. I would suggest sending a PM or email to Snowflake, though I’m not sure how often she checks in.
Anybody know what’s up withAnybody know what’s up with tables in the website?
Right now, they always force themselves to be the full width, and it’s impossible to make a bordered table of smaller width except by doing a messy/complex nested table.
As an example, the only way to create a 2×2 table of width “300” would be to do:
<table>
<tr><td width=”300″><table>
<tr><td width=”150″>stuff
<td width=”150″>stuff2
<tr><td>stuff3
<td>stuff4</table>
<td><br></table>
As opposed to a simpler:
<table>
<tr><td width=”150″>stuff
<td width=”150″>stuff2
<tr><td>stuff3
<td>stuff4</table>
Also, as can be seen in the guide above (hence why I commented here since it’s a good example of the problem -and- is a guide relevant to the subject), some borders just don’t even show up. In the first two examples for borders, the bottom border isn’t showing. For the fourth example with four columns, the border between the third and fourth column isn’t showing.
Speaking of the guide above, it also illustrates the first issue at the end. Note how both the “I’m huge” and “I’m tiny” tables are identical despite different coding. =(
Inside Table BordersCan you set a different thickness to the borders separating interior cells? Like darken the line that separates Row 1 from Row 2, applied to the entire table.
Yep! I’ll add that in soon,Yep! I’ll add that in soon, but a quick example.
[code]
[/code]
Don’t be famous, be infamous
Width of tablesGreat guide which I found very useful.
Is it possible to set the size (width) of a table? Mine seems to have filled the whole page. Or is there a way to set the size of a column rather than letting it autosize?
CSSHmm, I’ll try making a guide using a style sheet, maybe even a guide about using stylesheets =P
Groovy, I shall have to putGroovy, I shall have to put this to the test here soon to confirm it myself. If you have an screenshots or errors that you can send my way feel free.
Don’t be famous, be infamous
The option is already there.The option is already there. Html can be used together with bbcode to write guides here, as long as you choose bbcode as input format 🙂
You inspired me to write aYou inspired me to write a guide about ToCs, so thanks! I think guides like this can really benefit the site, since it makes [b]everyone’s[/b] guides better 🙂
Think soWell it sure as heck didn’t work last time I tried it, but admittedly that was a few weeks ago.
What have I started!!!Groovy, glad everyone likes it and please as always help me out and show me ways to improve upon things. I take all comments very seriously.
Don’t be famous, be infamous
Also it’s important to note[i]Also it’s important to note that you CANNOT use HTML if you are using Mediawiki as an input format (which I learned with sadness). You probably want to mention this somewhere in your guide.[/i]
This is confirmed true?
Don’t be famous, be infamous
Hmm, HTML editing would be aHmm, HTML editing would be a good opton to have, it’s probably abit more advanced though for the purposes of this site. Not everyone has had HTML experience lol 🙂
To Shikamaru… I’m a self-tought pro-web designer when I can be bothered to get off my backsaideand make abit of extra cash 🙂
nvm[b]Edit:[/b] What I said in this comment not true, ignore it. The above comment was correct though 🙂
As I can see, you are aAs I can see, you are a somewhat experienced user of HTML and CSS-based web editing.
As Jame said, it’s not possible to add additional CSS content to buff the looks of your guide, I don’t like it too, but whatever :p.
You can greatly enhance your guides with BBcode and (X)HTML too, you know! 🙂
Haha, with sadness
JustHaha, with sadness 😉
Just broke my heart right there!
I don’t think that’sI don’t think that’s possible :/
I think the previous posterI think the previous poster broke something in his comment, left a table tag un-closed or something – the page is all wonky now.
[b]Edit:[/b] Nevermind, it appears to be fixed.
Some notes<html> – you can make the tags without spaces. See [url=http://www.utexas.edu/learn/html/spchar.html]this page[/url] for details on how to do this – basically it’s some code for “special characters”, so you can make the less than and greater than signs with that.
Also it’s important to note that you CANNOT use HTML if you are using Mediawiki as an input format (which I learned with sadness). You probably want to mention this somewhere in your guide.
Very Sweet !This is a great guide to help others create better quality guides, and also it’s a great introduction for anyone into the world of HTML programing and CSS-based web editing.
A quick question to Jame on this subject…
Are we able to utilise a CSS within our guides, perhaps to format or design it? Personally I like to define everything’s properties and then create and add the content, and much rather this to the way of formating content line-by-line.
Or are Style Sheets not possible within our guides.
No problems if not, I just think that they would add a greater scope for guide contributors to work with 🙂
A few notes about CORRECTA few notes about CORRECT HTML:
You should never use capitals. for example, not or –
Also the same with attributes –
When you have a tag without ending – for example , you put / in the end.
That’s awesome! Very nicelyThat’s awesome! Very nicely done.
I’ll make sure to use this whenever the opportunity arises in one of my next guides 🙂