Tables: Styling Tables

Tip #1 – Borders are not added by default so if you want one you must create the table first then add the border to it. 

​​Tip #2 -colspan defines the number of columns a cell should span.

Code Along

<table border="1">
            <tr>
                         <th colspan="4">Story Line Details</th>
            </tr>
<td rowspan="3">Treetops</td>
 
 
            <style>
    
            #customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            }
             
            #customers td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;
            }
             
            #customers tr:nth-child(even){background-color: #f2f2f2;}
             
            #customers tr:hover {background-color: #ddd;}
             
            #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #04AA6D;
            color: white;
            }
 
            </style>
 
<table id=”customers” border=”1”>

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