Tag: html

HTML Table Code

On By AndyIn htmlLeave a comment 

<!--table-->
  

       
  

       <div class="content-text section" style="margin-top: 10px; margin-bottom: 20px;">

<div class="scroll-container scroll-x"> 


     <div class="content-2 section " style="margin-top: 1px">
    <div class="content-item">
         
         
         
         
  
    <table class="brand-p1" style= "margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; text-align: center;    margin-left: auto;
  margin-right: auto; border-collapse: collapse; background-color:transparent; font-size: 13px; width:100%;
  ">
  <tr>
     <th colspan="4" style="border: 1px solid #878681;background-color:transparent;font-size: 15px;"><strong>Table Example Header



</strong></th></tr>
         <tr style=" border: 1px solid #878681;background-color:transparent; font-size: 14px;">
 
    <th style="border: 1px solid #878681;background-color:transparent;">Level</th>
    <th style="border: 1px solid #878681;background-color:transparent;">Length (m)</th>
      <th style="border: 1px solid #878681;background-color:transparent;">Width (m) </th>
    <th style="border: 1px solid #878681;background-color:transparent;">Playing Surface </th>
     </tr>
      
  
      
       <tr style=" border: 1px solid #878681;background-color:transparent;">

    <td style="border: 1px solid #878681;background-color:transparent;">International



</td>
    <td style="border: 1px solid #878681;background-color:transparent;">28

</td>

 <td style="border: 1px solid #878681;background-color:transparent;">15

</td>
    
    <td style="border: 1px solid #878681;background-color:transparent;">Area elastic wooden	

</td> 
    
    
 
         
         
         

  </tr>
     
  <tr style=" border: 1px solid #878681;background-color:transparent;


">
    <td style="border: 1px solid #878681;background-color:transparent;">Premier

</td>
    <td style="border: 1px solid #878681;background-color:transparent;">26-28

 

</td>
     <td style="border: 1px solid #878681;background-color:transparent;">14-15

</td>
    <td style="border: 1px solid #878681;background-color:transparent;">Semi-sprung wooden or synthetic</td>
    
     
  </tr>
       
      
      
      
       <tr style=" border: 1px solid #878681;background-color:transparent;


">
    <td style="border: 1px solid #878681;background-color:transparent;">Club

</td>
    <td style="border: 1px solid #878681;background-color:transparent;">26-28

 

</td>
     <td style="border: 1px solid #878681;background-color:transparent;">14-15

</td>
    <td style="border: 1px solid #878681;background-color:transparent;">Semi-sprung wooden or synthetic</td>
    
     
  </tr>
      
      
      
      
      
      
      
       <tr style=" border: 1px solid #878681;background-color:transparent;


">
    <td style="border: 1px solid #878681;background-color:transparent;">Community

</td>
    <td style="border: 1px solid #878681;background-color:transparent;">26-28

 

</td>
     <td style="border: 1px solid #878681;background-color:transparent;">14-15

</td>
    <td style="border: 1px solid #878681;background-color:transparent;">Semi-sprung wooden or synthetic</td>
    
     
  </tr>
      
      
      
    
        
      
      
      
  
</table>
     

    </div> 
    </div>
     
     </div>
   
     </div>
  
 <!--table-->

The code in bold – is for adding a horizontal scroll bar. If a table is too wide on mobile, the scroll bar let’s users slide it across and view all the table’s info and columns

The code in italics – these are “in-house” CSS classes, that probably won’t work or do anything in your code.

Add the number of columns to this bit of code near the top:

  • <th colspan=”4”

This is how the above code should look when published:

Responsive Youtube IFrame Embed

On By AndyIn marketing, seo, wordpressLeave a comment

Go to a YouTube video – on YouTube.com

  • Click “Share” then “Embed” and grab the code

Default Embed Code:

DEafult Youtube iframe embed HTML code



I changed the default width="560" at the start to width="100%"
Also added style="max-width: 600px;" - after allowfullscreen:

I can’t show an example unfortunately, as my Free WordPress.com blog doesn’t allow to add any code. The embed above isn’t fully responsive.

Responsive Images with Inline CSS

On By AndyIn Adobe Illustrator, Business, marketingLeave a comment

This is how I create images that are full width in desktop devices and mobiles etc.

You just need to use:

max-width: 100%;
height: auto;

Good info here on W3 Schools


      
            <img src="image-address.png" 
style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >

Change the “max-width” to whatever you want the max width of the image to be on a desktop device.

For personal reference, this is the exact code I need for my own website with pre-built classes:

 <div style= "margin-bottom:20px;" > 
      <div class="content-item">
            <img src="image-url" style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
      </div>
  </div>

Here’s another example that I used today (july 2023!)

  <img src="drews-sexy-image.jpg"  style="width:1000px; max-width: 100%; height: auto; padding-top:25px;" alt="Basketball hoop dimensions" />

In the code above^ – the image will be 1000px wide on desktop, and the width of the screen on smaller devices

Padding-top, just puts some white space above the image

By the way – when you set image sizes to % – this represents the % of the block that the image is contained within