Tables: Creating a Table

Tip #1 – The table element presented a two-dimensional table of rows and columns with cells that hold information.

​​Tip #2 – Always remember the TR is Table Row, TH is Table header, and TD is table data.

Code Along

​​<!-- DECLARATION -->
            <!DOCTYPE html>
            
<!-- HEAD TAG -->                 
            <head>
             
<!-- STYLE TAG -->                 
            <style>
            </style>
    
            </head>
 
<!-- BODY TAG -->     
            <body>
 
            <h2>Hero and Villians Table</h2>
 
<!-- WHOLE TABLE TAG -->   
            <table>
 
<!-- ROW TAG -->                  
            <tr>
             
<!-- TABLE HEADER TAG -->                       
                         <th>Name</th>
                         <th>Hero OR Villain</th>
                         <th>Location 1st Encounter</th>
                         <th>Story</th>
                        </tr>      
             
 
            <tr>
<!-- TABLE DATA TAG -->                 
                         <td>Luna</td>
                         <td>Villain</td>
                         <td>Treetops</td>
                         <td>Helps find the magical door</td>
            </tr>
            
                                                                          
            </table>
            </body>
</html>

Instructions: 

  1. Click the play button to watch the video lesson.
  2. Watch the lesson as many times as needed.
  3. Code along with the instructor using the integrated code editor in the center of your screen.
  4. You can use the Run button beneath the code editor to test your code.
  5. Output from the code that you have written will appear in the panel on the right side of your screen.

If you get stuck or need assistance, you can click the button below to connect with a tutor. 

For additional questions or technical support, email support@veroskills.com