|
On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.
To help illustrate here is a example:
CSSCode:
+ Show Spoiler +
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}
div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
HTML CODE creating Forms without the use of tables with the above CSS:
+ Show Spoiler +<form> <div class="box"> <h1>Contact Form : </h1> <label> <span>Full name</span> <input type="text" class="input_text" name="name" id="name"/> </label> <label> <span>Email</span> <input type="text" class="input_text" name="email" id="email"/> </label> <label> <span>Subject</span> <input type="text" class="input_text" name="subject" id="subject"/> </label> <label> <span>Message</span> <textarea class="message" name="feedback" id="feedback"></textarea> <input type="button" class="button" value="Submit Form" /> </label> </div> </form>
As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way.
|
On August 10 2011 03:20 KeksX wrote:Show nested quote +On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.
Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you. "to break a butterfly on a wheel" He needs a table. He makes a table. :3
He doesn't need a table, he needs a form. Tables are for structuring complex data which contains 8 or more fields with X amount of rows. This is just a simple form and it's hard as hell designing a table compared to a list. he is doing 10 times the work for no real benefit.
|
On August 10 2011 03:20 KeksX wrote:Show nested quote +On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.
Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you. "to break a butterfly on a wheel" He needs a table. He makes a table. :3
Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS.
The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database.
|
On August 10 2011 03:28 SarR wrote:Show nested quote +On August 10 2011 03:20 KeksX wrote:On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.
Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you. "to break a butterfly on a wheel" He needs a table. He makes a table. :3 Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS. The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database.
I mean, he's only learning the very basics. It would be better to start slowly then to get him into stuff he doesn't properly understand yet...
|
On August 10 2011 03:30 KeksX wrote:Show nested quote +On August 10 2011 03:28 SarR wrote:On August 10 2011 03:20 KeksX wrote:On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going.
Edit:
Could you provide a screenshot of what you expect your HTML form to look like and id make some time to to recreate it using CSS as an example for you. "to break a butterfly on a wheel" He needs a table. He makes a table. :3 Im not sure about what you're alluding to, but if you're referring to effort necessary vs the benefits, then that is also an argument in favor of CSS. The only way Id ever consider recommending tables is for laying out dynamic data, for example, data queried from a database. I mean, he's only learning the very basics. It would be better to start slowly then to get him into stuff he doesn't properly understand yet...
its tables that are hard, lists are simple as hell.
|
EDIT: Spoilered for being a dumbass and not readying Integra's post thoroughly. Thought he was actually arguing for the use of tables over CSS.
+ Show Spoiler +On August 10 2011 03:23 Integra wrote:Show nested quote +On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going. To help illustrate here is a example: CSSCode: + Show Spoiler +
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}
div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
HTML CODE creating Forms using List instead of Tables with the above CSS: + Show Spoiler +<form> <div class="box"> <h1>Contact Form : </h1> <label> <span>Full name</span> <input type="text" class="input_text" name="name" id="name"/> </label> <label> <span>Email</span> <input type="text" class="input_text" name="email" id="email"/> </label> <label> <span>Subject</span> <input type="text" class="input_text" name="subject" id="subject"/> </label> <label> <span>Message</span> <textarea class="message" name="feedback" id="feedback"></textarea> <input type="button" class="button" value="Submit Form" /> </label> </div> </form> As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way. Cant argue with that. All the same its a very bad practice. For something simple like this for demonstration purposes then yes. However, if he plans to put his HTML skills to practical use one day then he would be in a world of hurt if he practices this way of HTML coding. Software development, and anything similar like website development is NEVER finished, its always a work-in-progress. When he needs to tweak the layout, which is a dead certainty as clients or whoever you're doing this for will want more, you'd find then that tweaking the CSS is a lot less stressful than rummaging through countless lines of table code just to change some simple thing. Another very powerful benefit of using CSS is that you can re-use it very easily to arrange other elements in a similar fashion by manipulating the CSS selectors. With tables you'd be copying that code all over the place, when you could have that layout code all in one place using CSS and subsequently apply them to as many elements on as many html forms as you like with little more than a simple reference to the stylesheet file. TLDR; I think its better he starts off with good practices, even with simple things like this.
|
On August 10 2011 03:42 SarR wrote:Show nested quote +On August 10 2011 03:23 Integra wrote:On August 10 2011 03:16 SarR wrote:
I strongly recommend that you do not use tables to arrange HTML elements. It could get real ugly for you should you decide to make changes later. Tables are so 1995
Use CSS instead to arrange your elements. Id even go so far as to say that tables are unnecessary in this age. CSS is the way you should be going. To help illustrate here is a example: CSSCode: + Show Spoiler +
*{ margin:0; padding:0;}
body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}
form,input,select,textarea{margin:0; padding:0; color:#ffffff;}
div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
HTML CODE creating Forms using List instead of Tables with the above CSS: + Show Spoiler +<form> <div class="box"> <h1>Contact Form : </h1> <label> <span>Full name</span> <input type="text" class="input_text" name="name" id="name"/> </label> <label> <span>Email</span> <input type="text" class="input_text" name="email" id="email"/> </label> <label> <span>Subject</span> <input type="text" class="input_text" name="subject" id="subject"/> </label> <label> <span>Message</span> <textarea class="message" name="feedback" id="feedback"></textarea> <input type="button" class="button" value="Submit Form" /> </label> </div> </form> As you can see the form contains less code compared to the table, and you don't have to struggle with all the colspan, width of each row and so forth Tables are just... bad in every way. Cant argue with that. All the same its a very bad practice. For something simple like this for demonstration purposes then yes. However, if he plans to put his HTML skills to practical use one day then he would be in a world of hurt if he practices this way of HTML coding. Software development, and anything similar like website development is NEVER finished, its always a work-in-progress. When he needs to tweak the layout, which is a dead certainty as clients or whoever you're doing this for will want more, you'd find then that tweaking the CSS is a lot less stressful than rummaging through countless lines of table code just to change some simple thing. Another very powerful benefit of using CSS is that you can re-use it very easily to arrange other elements in a similar fashion by manipulating the CSS selectors. With tables you'd be copying that code all over the place, when you could have that layout code all in one place using CSS and subsequently apply them to as many elements on as many html forms as you like with little more than a simple reference to the stylesheet file. TLDR; I think its better he starts off with good practices, even with simple things like this.
what? are you responding to my post you quoted, because that essentially demonstrates what you just talked about why tables are bad.
|
Oh fuck......LOL Im doing like 3 things at once here so I just sped-read what you posted and "thought" I got the gist of what you were saying, you are actually saying the opposite.
My apologies for being a dumbass LOL.
|
It's fine, you explained why tables are bad, so its all good 
|
Love u babe...gimma a kiss. 
|
lol - I'm really not all that proficient with CSS yet. Basic stuff, like color and fonts, yea, but I'm really not that great with anything else. The way it is now is perfect for the way I want it.
If someone wants to do a sample CSS, go for it. I'd love to see how it's done. This just seemed the easiest way to get done what I wanted from it.
|
On August 10 2011 12:46 Polemos wrote:
lol - I'm really not all that proficient with CSS yet. Basic stuff, like color and fonts, yea, but I'm really not that great with anything else. The way it is now is perfect for the way I want it.
If someone wants to do a sample CSS, go for it. I'd love to see how it's done. This just seemed the easiest way to get done what I wanted from it.
See the first post, second page of this thread for a complete example.
|
|
|
|
|
|
EPT
