All Your HTML Tables are Belong to Us!
My favorite board game can easily be made with the HTML table element. Learn how to build grids with the table, tr, td, and th elements. Join Unique ID and I in an epic battle of wits!
- Click here for the full video transcript
>> DAISY: Hey foxy friends!
>> UNIQUE ID: Hello world!
>> DAISY: I invited ID over to play one of my favorite games, All Your Base!
>> COMPUTER: Somebody set up us the board! Somebody set up us the board!
>> NARRATOR: It’s electronic talking All Your Base! From Dototot. So real, it really talks!
>> COMPUTER: We get signal!
>> NARRATOR: We’re talking instant programming and voice recognition technology.
>> KID: Main screen turn on!
>> COMPUTER: How are you gentlemen?
>> NARRATOR: Against the computer or opponent, your mission: capture all base.
>> COMPUTER: All your base are belong to us!
>> KID: Yeah! Now you’re talking!
>> UNIQUE ID: Main screen turn on!
>> DAISY: Um… I don’t have the electronic all your base.
>> UNIQUE ID: What is this, cardboard? Counterfeiters have really lowered their standards.
>> DAISY: I made this myself…
>> UNIQUE ID: Oh, really? It’s… nice.
>> DAISY: The rules of All Your Base are simple. ID and I have strategically placed our bases on a grid, and now we have to guess where each others bases are. The first one to capture all of their opponent’s bases wins.
>> UNIQUE ID: Keep talking, I need more time to develop my strategy.
>> DAISY: Alright, while ID is setting up, I’ll tell you about how I made this game board. This area here is called a grid. A grid is made up of rows and columns of cells. In HTML, we can make a grid with the table tag. Rows are made with the tr tag, and cells with the td tag. All your base is played on a 5 by 5 grid, but our html table would need to have 6 rows and 6 columns. That’s because these headings are also part of the table. Headings are made with the th tag. Usually headings appear on the top row of your table to describe the content in the columns, but sometimes they can be along the side to describe the content in the rows, like these. In this case, my table headers help find the location of my table cells. For instance, I placed my camp on the table cell D-1, which means it is found in the fourth cell of the first row. The rest of the game pieces are bigger than one table cell, so they’ll need to span multiple rows or columns. My fortress horizontally spans cells B-2 and C-2. This is done with the colspan attribute. Because this attribute makes one cell act like two cells, this row only has four td tags. Likewise, we can make a cell span multiple rows with the rowspan attribute. My station spans cells E-3 to E-5, so the td tag in E-3 needs the attribute rowspan equals 3. That means we need to take out one td tag from both rows 4 and 5 to accommodate the colspan.
>> UNIQUE ID: Okay, I’m ready!
>> DAISY: I’ll let you start.
>> UNIQUE ID: D-1!
>> DAISY: What!? You broke my camp! Grr! E-2.
>> UNIQUE ID: Miss, B-2!
>> DAISY: Hit! A-1
>> UNIQUE ID: That’s a miss. C-2!
>> DAISY: You capped my fortress! E-2, D-2, D-5!
>> UNIQUE ID: Miss miss miss! You have no chance to survive, make your time! E-3, E-4, E-5!
>> DAISY: All my base are belong to… you. But how? How did you do it?
>> UNIQUE ID: It was easy. I could hear you talking about where you put your pieces. Want to play again?
>> DAISY: No, this is an addictive product. I think it has become a problem. Lets dump it in a landfill and seal it up with cement.
My favorite game is played on a simple grid, which we learned is easy to make with an HTML table.
Next we’ll learn how to make complex forms with HTML. Think you’re ready for it?