title: Regex to add style attribute to a specific <table> tag
body: <p>** >> Please see Update near the bottom**</p>
  
  <p>I am having to deal with a large amount of imported HTML code that is poorly formatted. </p>
  
  <p>I have around 200 similar (but not identical) instances of the code, and each instance includes a specific set of <code>&lt;img&gt;</code> tags. In some instances, the <code>&lt;img&gt;</code> tags run from one to the next, with no line breaks in between. In other instances there are line breaks in the code, and these result in <code>&lt;br&gt;</code> tags being inserted into the final code sent to the browser. </p>
  
  <p>This will make more sense once I illustrate what I mean:</p>
  
  <p>Example #1: There are no breaks between the <code>&lt;img&gt;</code> tags...</p>
  
  <pre><code>&lt;table align="center" border="0px"&gt; &lt;tbody&gt;&lt;tr&gt; &lt;td&gt; &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/CustomerSatisfaction.png" alt="100% Customer Satisfaction" height="60" align="middle" width="140"&gt; &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/PaypalVerified.png" alt="Paypal Verified" height="60" align="middle" width="140"&gt; &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/FastDelivery.png" alt="Fast Delivery" height="60" align="middle" width="140"&gt; &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/Recycled.png" alt="100% Recyled Pre-owned Products" height="60" align="middle" width="140"&gt; &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/TopSellerRated.png" alt="Top Seller Rated" height="60" align="middle" width="140"&gt; &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/PhoneSupport.png" alt="Phone Support" height="60" align="middle" width="140"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Example #2: There are breaks between the <code>&lt;img&gt;</code> tags...</p>
  
  <pre><code>&lt;table align="center" border="0px"&gt;
  &lt;tbody&gt;&lt;tr&gt;
  &lt;td&gt;
  &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/CustomerSatisfaction.png" alt="100% Customer Satisfaction" align="middle" height="60" width="140"&gt; 
  &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/PaypalVerified.png" alt="Paypal Verified" align="middle" height="60" width="140"&gt; 
  &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/FastDelivery.png" alt="Fast Delivery" align="middle" height="60" width="140"&gt; 
  &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/Recycled.png" alt="100% Recyled Pre-owned Products" align="middle" height="60" width="140"&gt; 
  &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/TopSellerRated.png" alt="Top Seller Rated" align="middle" height="60" width="140"&gt; 
  &lt;img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/PhoneSupport.png" alt="Phone Support" align="middle" height="60" width="140"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>As mentioned, for reasons unknown to me, the Wordpress site on which this code is utilised throws in <code>&lt;br&gt;</code> tags when code example #2 is parsed through to the browser. </p>
  
  <p>That results in the images displaying as follows (on Firefox):</p>
  
  <p><a href="https://i.stack.imgur.com/l7v7B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l7v7B.png" alt="The way example #2 displays"></a></p>
  
  <p>Code sample #1 displays link this:</p>
  
  <p><a href="https://i.stack.imgur.com/qHFWf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qHFWf.png" alt="The way exmple #1 displays"></a></p>
  
  <p>I am thinking the best way to resolve this is do to a search/replace via MySQL on the DB, using a regular expression that will identify instances of code example #2 and make it like code example #1. In other words, the line breaks will be removed from between the relevant <code>&lt;img&gt;</code> tags.</p>
  
  <p>Two questions:</p>
  
  <p>1) Is that in fact the best way to go about this, or is there a potentially better way?</p>
  
  <p>2) If that is a valid and suitable way to do it, would you suggest a suitable regular expression.</p>
  
  <p>(With question 2, I am not sure what to suggest as the correct regex engine. This regex will be parsed within MySQL, using the Mac app Sequel Pro.app (<a href="http://www.sequelpro.com/" rel="nofollow noreferrer">http://www.sequelpro.com/</a>).</p>
  
  <h2>My take on the possible Regex logic</h2>
  
  <p>My guess is that we need to:</p>
  
  <p>1) Find instance of <code>&lt;table...&gt; ... &lt;/table&gt;</code></p>
  
  <p>2) Find instances of <code>&lt;/img&gt;</code> (soft line break) <code>&lt;img ...&gt;</code> within code identified by #1 above</p>
  
  <p>3) Remove (soft line break)</p>
  
  <p>There is one other <code>&lt;table&gt; ... &lt;/table&gt;</code> set within the code that will be searched. There is only one <code>&lt;img&gt;</code> within that instance. There are exactly 6 <code>&lt;img&gt;</code> instances within the <code>&lt;table&gt; ... &lt;/table&gt;</code></p>
  
  <h2>Update, taking comments into account</h2>
  
  <p>It has been suggested that I use the <code>flex</code> CSS <code>display</code> attribute, and apply it to the table row. I've done that, and it works well. I am a little concerned about compatibility on older browsers, as I gather it's a relatively recent CSS addition.</p>
  
  <p>I do, however, still need to do a search/replace to locate the correct <code>&lt;table&gt;</code> in the HTML. </p>
  
  <p>In most of the HTML instances, there are two instances of <code>&lt;table&gt; ... &lt;/table&gt;</code>. So I suspect the regex would need to do a negative forward check for something like <code>/stars/</code> which exists in a URL that's in the <code>&lt;table&gt;</code> instance I <strong>don't</strong> want modified. Then it would be a matter of replacing <code>&lt;table&gt;</code> with <code>&lt;table id="green-icons"&gt;</code></p>
  
  <p>Thanks.</p>
  
  <p>Jonathan</p>
  
  <p>P.S. I am aware there is a <a href="https://stackoverflow.com/a/1732454/1092677">LOT of contention</a> around whether or not regex is a valid way to make changes to HTML. As this is a relatively fixed and known set of HTML, I suspect it'll be okay. But I am also open to other suggestions. </p>