How to do a table effectively

HTML-CSS
1

Table

I have created this table but they way I have done it seems to be messy. I have done it using inline CSS just a test and will put it in my CSS file later. Is there a better way of formatting it? My code

 <hr align="left" width="40.5%" style="border-color:black;">
 <table style="border-collapse: collapse; border-top:1px solid black; border-bottom:1px solid black;">
 <caption style="text-align: left; padding-bottom: 7px;"><b style="color: #0066cc;">Table 1.1</b> - Some 
 Physical Properties</caption>
     <tr style="text-align: left;">
          <th>Property</th>              
          <th>Using the Property to Distinguish Substances</th>
    </tr>
    <tr>
         <td style="padding: 0px 15px 0px 0px; border-top:1px solid black;">Color</td>                  
         <td style="border-top: 1px solid black;">Is the substance colored or colorless? What is color and 
 intensity?</td>
     </tr>
     <tr>
         <td>State of Matter</td>
         <td>Is it a solid, liquid or gas?  If it is a solid, what is the shape of the particles?</td>
     </tr>
     <tr>
         <td>Melting Point</td>
         <td>At what temperature does the solid melt?</td>
     <tr>
         <td>Boiling Point</td>
         <td>At what temperature does the liquid boil?</td>
     </tr>
     <tr>
         <td>Density</td>
         <td>What is the substances density?</td>
     </tr>
     <tr>
     <td>Solubility</td>
         <td>What mass of the substance can dissolve in a given volume of solvent?</td>
     </tr>
     <tr>
      <td style="padding: 0px 20px 0px 0px;">Electric Conductivity</td>
     <td>Does the substance conduct electricity?</td>
     </tr>
     <tr>
     <td>Malleability</td>
         <td>How easily can a solid be deformed?</td>
     </tr>
     <tr>
     <td>Ductility</td>
         <td>How easily can a solid be drawn into a wire?</td>
     </tr>
     <tr>
     <td>Viscosity</td>              
     <td>How easily will a liquid flow?</td>
     </tr>
 </table>

 <hr class="top-border">

One of my other issues that top

line. When I put that in CSS the line does not align left. It uses the default setting of center.
2

I’d need to see your code to give better advice. Are you giving the THs a text-align: left?

3

Darn it! I pasted the code in there but it just used the mark up! I’ll edit it

4

So the

question is irrelevant. I just used a style attribute in the element with a border and padding. I swear I tried before and it didn’t work.
5

Glad you got it working. I copied and pasted it in a pen and it looked fine to me.

6

It looks fine on the page but the code was ugly. Now that i am going through the code and making CSS classes, id tags and the like it looks much better. Trail and error is what coding is all about. I just keep plugging stuff in and seeing if it works. And doing internet searches. Plugging that stuff in and see if it works.

1 Like