Posted in how to, html, Uncategorized

tables galore part 1


This is the html series tables galore, where you will learn how to make beautiful html tables for your website. Starting from rows with data in them all the way to tables with headers, stiles, formatting, and footers. It’s all on this website’s html tables galore series.

part1– building your table with just rows and data

This is the best one to start with. It is the easiest table you will ever create, and so it’s good for starters. I will walk you threw this tut, and to make sure you understand it I will have you send me the exact code to make a table. These forms will below the tut itself.

disclaimer

    1. I will use code spelling. for example “less” instead of “<".
    2. This tutorial will teach you what you should be able to understand but if you don't get something, feel free to use the form at the bottom of the page under the I Don't Get It, Can You Still Help Me? heading.

starting with the opening tag

An opening tag in html tells the editor to create something in html. You use these tags to add the element to the page, not necicerrily create the full thing. There is a little more to that. These tags are usually surrounded by less and greater, and usually have quotes in them.
for the table, you will use:
less table greater
the words in bold will be written as and not less and greater when you send me the form answer.
now, you have opened your table, so we can move to the next section.

borders and why you need them

a table border defines the outside edges of your table. Whether you want them thicker or thinner is up to you. to make a border, just put:
lesstable border=”1″greater
just like the last section, you will need to put rather then greater, as you should know because less and greater are in bold.
Note: you can put higher numbers then 1 on your table border property. I think it can go up to 8 actually.

the data

in this form of table, there is 2 types of tags that will make up your table. 1 is for the row, and 1 is for the data in that row.
here is the opening and closing a row tag:
less trgreater. This makes a table row. TR=Table Row, meaning that tr is an acronim for table row.
this goes the same for Table Data, making that tag lesstdless/td greater
“Huh?” you ask. Yes, I’ve added a tage that had slash in it. When you put slash after the less in a tag like row or data or table, you are telling the editor to close the tag. So, I just opened and closed the table data tag. Between the > of the opening table data tag and the < of the closing one, you can put what you want in that set of data for your table.
here is example:

lesstdgreater this is example table data. less / td greater

Note that TABLE DATA TAGS ALWAYS HAVE TO BE INSIDE A ROW!!!!!!!!!!!! for example:

lesstrgreater
less td greater I am typing a set of table data in that rowless/td greater

note:
you can type however many rows and datas inside your table.
below, is a example table that I create, and the source code (symbols spelled out and not bold because I bet you know they are symbols that you right as they are not spelled out).

row one data one table data 2 row 1
row 2 data 1 row 2 data 2

now, here is the code:
less table greater
less table border =”1″ greater
less tr greater
less td greater table row 1 data 1 less slash td greater
less td greater table row 1 data 2 less slash td greater
less slash td greater
less slash tr greater
less tr greater
less td greater row 2 data 1 less slash td greater
less td greater row 2 data 2 less slash td greater
less slash tr greater
less slash table greater

note how I added the less slash before repeting the name of the tag at the end of my data, always put the tds in the trs, and made the same number of tds in each tr instead of different numbers.

lets test your knoledge







Upon submitting, I should get and reply to your submission with the good or terrible news.

still don’t get something?

please visit the contact me, and tell me you need help with tables part 1, and what you need help with it, and I will get back with you.
I can’t wait to post another one of these table tutorials for you. In the mean time,
by.

Advertisements

what do you think of this?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s