Choose from our various pricing plans. There is a package for everyone!


Table styling

View previous topic View next topic Go down

Tutorial Table styling

Post by Mr.Joker on Mon Aug 13, 2012 12:00 am

Here is the code:
Code:
<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
#table {
border-collapse:collapse;
}
#Main {
border:1px solid #3d5c01;
color:#ffffff;
background-color:#3d5c01;
padding:7px;
width:200px;
text-align:center;
font-family:"Trebuchet MS";
}
#sub_main {
border:1px solid #3d5c01;
padding:6px;
font-family:"Trebuchet MS";
text-align:center;
}
#sub_main2 {
border:1px solid #3d5c01;
padding:6px;
background-color:#98bf21;
font-family:"Trebuchet MS";
text-align:center;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td id="Main">Name</td>
<td id="Main">Surname</td>
<td id="Main">Age</td>
<td id="Main">Web Language</td>
<td id="Main">Programming language</td>
</tr>
<tr>
<td id="sub_main">Alexander</td>
<td id="sub_main">Arsic</td>
<td id="sub_main">19</td>
<td id="sub_main">HTML,CSS,Javascript</td>
<td id="sub_main">Visual Basic</td>
</tr>
<tr>
<td id="sub_main2">Petar</td>
<td id="sub_main2">Nikic</td>
<td id="sub_main2">17</td>
<td id="sub_main2">HTML,CSS,PHP</td>
<td id="sub_main2">C++</td>
</tr>
<tr>
<td id="sub_main">Marko</td>
<td id="sub_main">Bogdanovski</td>
<td id="sub_main">14</td>
<td id="sub_main">All++</td>
<td id="sub_main">All++</td>
</tr>
<tr>
<td id="sub_main2">Test</td>
<td id="sub_main2">Test</td>
<td id="sub_main2">Test</td>
<td id="sub_main2">Test</td>
<td id="sub_main2">Test</td>
</tr>
</table>
</body>
</html>
How it look:


So how this work? Simple. We have table with 5 rows and inside every row 5 table data. Each row represent different part as: Name, Surname, Age, Web Language and Programming Language. The names was just a test, it is not real. By the CSS you can see how to style tables. If you don't understand something , you can simple ask me and I will explain better Smile .


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 25
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Table styling

Post by RSguideMaker on Mon Aug 13, 2012 1:51 am

Looks good Smile



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Table styling

Post by Th1nK on Mon Aug 13, 2012 8:35 am

Cool!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Table styling

Post by Eclipse on Mon Aug 13, 2012 10:03 am

Where would this appear?




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Table styling

Post by Mr.Joker on Mon Aug 13, 2012 10:05 am

It can be used in many ways. When you are creating HTML page you just learn how to get better tables. Or it can be used also with BB codes.


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 25
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Table styling

Post by Eclipse on Mon Aug 13, 2012 10:06 am

Oh, cool, good tutorial




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Table styling

Post by Th1nK on Tue Aug 14, 2012 9:06 am

Congratulations, your tutorial has been accepted.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Table styling

Post by Mati™ on Tue Aug 14, 2012 9:16 am

Great tutorial and easy to follow.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Table styling

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum