Table styling in CSS - Video tutorial

Profit from your site
- - Profit from your website - Advert types - What is an affiliate program? - Online payment methods - Positioning of adverts - SEO, search engine optimization - Tool / software for SEO - Linkbuilding for beginners - Get started!
Beginner knowledge
- - Web Programming Languages - Free HTML, CSS, Javascript editors - Free PHP and MySQL editors - What will a site cost to make? - Free website services - Freebies for your site - CMS, the easy choice!
HTML
- 0 HTML course introduction 1 Installation of a free HTML editor 2 Introduction to basic HTML 5 codes 3 Pictures, links, headings and text 4 Text formatting in HTML 5 5 Tables in HTML 5 6 lists in HTML 5 7 What you have learned so far 8 Zip files and PDF files in HTML 5 9 Iframes in HTML 5 10 Favorit icon for your web site 11 Forms in HTML 5 12 Div tags in HTML 5
CSS
- 0 CSS course introduction 1 Introduction to CSS styling 2 Backgrounds in CSS 3 Text and class styling in CSS 4 Link styling in CSS 5 Div tags in CSS 6 Tables in CSS 7 Lists in CSS 8 Navigation bar with CSS and HTML
Javascript
- 0 Javascript course introduction COMMING SOON!
PHP
- 0 PHP course introduction COMMING SOON
MySQL
- 0 MySQL course introduction COMMING SOON!
Wordpress
- 0 Wordpress course introduction - COMMING SOON!

- Table styling in CSS

In this CSS video tutorial it will be explained how to style your tables with CSS. It will be shown how to create a unique and special styling for a specific table. This video will basically reveal how to to turn your regular and boring tables into exciting and colorful tables.

The source code is available in the text box below - please feel free to copy it

<!-- CSS file
table#sample {
border-style: solid;
border-width: thin;
border-color: #000;
border-collapse: collapse;
    
    
}
.tableheader {
    font-weight: bold;
    font-size: 22px;
    background-color: #FF0;
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #000;
    
    
}
.tdgrey {
   font-weight: bold;
    font-size: 15px;
    background-color: #999;
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #FFF; 
}
.tdwhite {
    font-weight: bold;
    font-size: 15px;
    background-color: #FFF;
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #999;
}

-->
<!-- HTML file:
<!DOCTYPE html>
<HTML lang="en-US">
    <HEAD>
        <TITLE> Table styling CSS </TITLE>
        <META charset="utf-8" />
        <META name="keywords" content="" />
        <META name="description" content="" />
        <link rel="stylesheet" href="Stylesheet.css" type="text/css" />
    </HEAD>
    <BODY>
        <table id="sample">
            <tr>
                <th class="tableheader"> Heading 1 </th>
                <th class="tableheader"> Heading 2 </th>
            </tr>
            <tr>
                <td class="tdgrey"> Data 1 </td>
                <td class="tdgrey"> Data 2 </td>
            </tr>
            <tr>
                <td class="tdwhite"> Data  1 </td>
                <td class="tdwhite"> Data  2 </td>
            </tr>
            
        </table>
    </BODY>
</HTML>

-->

Video tags:
This video relates to subjects such as: Make your own website, build your own website, free website , Making a website from scratch , web design, HTML website, websites, html, video tutorials, free tutorials, beginner tutorials, Tables in CSS, Table styling

If your have any comments, then feel free to use the form below. Everyone can comment without using a login.

Should you have any technical questions or problems then please join our forum! In here our skilled members will be ready to help you with all your web development issues!

Written by: Andrew.   Date:  2013-01-05 
Thank you for lessons.
What's the difference between id and class?
Why have you used classes before but not now?

Written by: Thomas.   Date:  2013-01-06 
Hi Andrew,

Classes er used when you want to use the style on multiple elements. is is used when only one element will need the style...

Submit Your Own Video

The family: NemProgrammering.dk - lav din egen hjemmeside, Videozoo.dk - Sjove videoer
© BeginnerTuts.com | T.Iversen | International

Tutorials

Forum

About

Contact

Profit from your site