In part 1, we disgussed how to create just a basic table with html code. In this tutorial, we will learn how to create a table with cell padding (you will find out what it is soon).
an example table from last tutorial:
| cats | |
| 3 | 6 |
Yep, just a basic table. Shouldn’t we have cell padding and spacing in there?
before we begin
I will tell you this:
- the spelled out symbols will be put in bold format, so you know to type them as they are and not spell them out like I did in this tutorial. for example:
less means you have to type the actuall less than sign. If I type less (not bold), you know that I don’t mean for you to type any code. - this is part 2 of the table galore series, where you learn to add spacing and padding to cells.
diving into the code
We will now dive into the code of creating a table. I will type up the code that you need first below:
lesstable borderequals”1″ cell paddingequals”7″ cell spacingequals”7″greater
This tells the html code editor to create a table with cell padding 7 and cell spacing at 7 as well. The padding puts space between the cells and the table walls. Note that the cell spacing should just be around 2 or 3 and not 7, I just over exaderated.
Now, you will type the table content code like you learned in part 1. You should remember the less trgreater and lesstdgreater tags to make up your table and the less slashtablegreater tag to end your table.
now, view this example table below:
dogs cats 3 6 Doesn’t that look different from the exact same table above before the tutorial part? Well, it is because I used some different code:
note that you should know now that less, quote, greater, and equals are all symbols that you should write as is and not spelled out.
less table border equals “1” cell padding equals “3” cell spacing equals “7”greater
less tr greater
less td greaterdogs less slash td greater
less td greater cats less slash td greater
less slash tr greater
less tr greater
less td greater 3 less slash td greater
less td greater 6 less slash td greater
less slash tr greater
less slash table greater
what did you learn:
[contact-field label="where do the spacing, padding, and border peramitors of the table go?" type="radio" options="in the middle of the less table greater tag, in the middle of the first less tr greater tag, in the middle of the first less td greater tag, at the end of the table"/]
[/contact-form]
still don’t get it?
please contact me if you need help with this tutorial.