Skip to main content
Menu
CodeBabes
  • Create new account
  • Request new password

or

  • Sign in with Twitter
  • Code
  • Babes
  • Sign Up
  • Log In

Looks like you missed a quiz. Go back and pass that shit!


NO STRIP FOR YOU!

Share the Love

  • Tweet

HTML Tables

Ok, you’ve made it this far, thanks for your hard work. We're almost out of clothing.

Let’s talk about HTML tables. Basically, if you can put your information in an Excel spreadsheet, it should probably go in a table. Tables might seem a little complicated at first, but spend some time with them, buy them a drink, and before you know it you’ll be getting busy in no time. Another place they are used is in HTML emails, which still utilize tables for consistent results in different email platforms. It’s mostly Microsoft’s fault, but you can blame pretty much any web development problem on Microsoft. Remember that.

Alright, lets get to it and set up a table using HTML.

We start with the table tags, they wrap the whole deal and let the browser know to expect tabley things within.

After the table tag we need to start adding rows. We do this with TR, the table row. If the table has a header we’ll add the the TH, or table header tag, inside the first row. The browser will style the table header a little differently by default. Usually, it bolds the text.

So what are we going to put in the table? Let’s make it my measurements, centerfold style. Put measurement in the first table header, then size in the second. Ok, now we add another row, for the content of the table. We’ll do bra first, that’s most important right? Then we have a new tag, called TD, which stands for Table Data. The table data tag encloses table cell’s content. Inside the first data tag we’ll put “bra”. Then, in the next one we’ll put 32 double D. Yeah, that’s right boys. The next two will be waist and hips to round things out, at 26 and 32 inches respectively. This table is shaping up nicely, no pun intended.

Ok, but what if we wanted to add another column, like centimeters, you know, for our Canadian friends, and well, the rest of the world. We would just have to add an extra data tag in each row.

If we wanted another row, like my height, we would add another row tag below the others, and then three data elements. 5 foot 10, yeah boys, watch out. And with that you’re no longer an HTML virgin, how does it feel? But there's still a long way to go before you’re a web dev casanova, check out our CSS lesson next.

Questions or Comments?

Lessons

  • HTML Text Tags
  • HTML Links and Images
  • HTML Layout with HTML 5
  • HTML Tables
HTML Virgin

Downloads

SignUp & Subscribe

What the What?

Lessons: 41

Much more to come!

50/50 Entertainment and Education. Learning doesn't have to be boring :)

Our Philosophy

Contact

  • support
  • Tweets!
  • Youtube
  • Google Plus
  • Facebook

Stuff

  • Blog
  • Sign Up
  • All Babes
  • All Courses
  • Become a CodeBabe!
  • MAKE A LESSON WITH CODEBABES!

Recent Courses

Internet Virgin
SEO Virgin
HTML Virgin
CSS Virgin
Programming Virgin with Javascript

Learn to Code with Babes

Copyright © 2023 CodeBabes.com • Made with

  • Privacy Policy
  • Terms of Use
Close Menu
  • Blog

  • All Courses
  • Android Virgin
    • Android Studio Tour
    • App Layout in Android Studio
    • Java Variables, Java Data Types & Android Views
    • Java Event Handling in Android
    • Android Intents, OOP This, Variable Scope
    • Passing the Data with Android Intents & Finish
    • Complete the Android App with Launcher Icons & APK
    • Android Happy Ending
  • Internet Intro
    • Backend Development
    • Front End Web Development
    • Programming Tools you Need
    • Hosting and Domain Names
  • HTML Virgin
    • HTML Text Tags
    • HTML Links and Images
    • HTML Layout with HTML 5
    • HTML Tables
  • CSS Virgin
    • Where to Stick your CSS
    • CSS Properties, Sizes and Colors
    • CSS Selectors
    • CSS Box Model
  • Programming Virgin
    • Variables in Programming
    • Programming Intro Conditional Statements
    • Programming Intro to Arrays
    • Programming with Loops
    • Programming with Functions
  • PHP Virgin
    • PHP Variables
    • PHP Conditionals
    • PHP Arrays
    • PHP Loops
    • PHP Functions
  • SEO Virgin
    • Make Google Love You
    • Understanding Keyword SEO
    • Optimizing for SEO
    • Technical SEO