Cellpadding dan cellspacing pada HTML5 - supar.web.id

supar.web.id - Bismillah, tulisan ini merupakan notes pribadi sebagai dokumentasi dan pengingat dikala lupa. Berawal dari mencoba uji validasi HTML5 untuk template blog kompiminimalis AMP yang ana pakai hasil karya mas Adhy Suryadi, ternyata Qodarulloh didapatkan eror pada atribut cellpadding='0' cellspacing='0' pada widget search-box.

Ana mencoba searching digoogle. Alhamdulillah didapatkan cara supaya atribut cellpadding='0' cellspacing='0' valid, ini asumsi ana sih (moga bener).

Perhatikan pada kode script dibawah ini.

Script ini ketika belum valid HTML5

<div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' placeholder='Search' required='' size='10' title='search' type='text'/>
                <input name='max-results' type='hidden' value='16'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>

Solusi agar valid pengujian HTML 5

1. Kode Script ini cellpadding='0' cellspacing='0' dihapus

2. Pada style amp-custom tambahkan kode ini

th, td {padding:0}/* cellpadding="0" */
table {border-collapse:collapse;border-spacing:0} /* cellspacing="0" */

3. Save template

Semoga bermanfaat...