In this example, we’ll show you how to create the 1st example of the Amazon Product Comparison table, as shown here.
What you need to know about this table type:
Generate the table by clicking on wpDataTables/Create a Table/Create a Simple Table from Scratch
On the next screen, create a table with 4 columns and 29 rows.
The 1st column contains simple text data where some of the data is enclosed in “span” with the class “h” for underlined cells. Only cells that mention that the color was changed were actually modified using the built-in table tools.
There’s no need for any styling since we’ll add CSS later to the page.
Column 1:
<span class="h">Preview</span>
Column 2:
<img src="https://wpdatatables.com/wp-content/uploads/2021/10/huawei40PRO.png" alt="" width="150" height="143" />
Column 3:
<img src="https://wpdatatables.com/wp-content/uploads/2021/10/SamsungS20Ultra.png" alt="" width="120" height="114" />
Column 4:
<img src="https://wpdatatables.com/wp-content/uploads/2021/10/XiaomiMi10.png" alt="" width="120" height="151" />
Column 1:
<span class="h">Model</span>
Column 2: Huawei P40 Pro
Column 3: Samsung Galaxy S20 Ultra
Column 4: Xiaomi Mi 10
Column 1:
<span class="h">Price</span>
Column 2:
<span class="price">$804</span>
Column 3:
<span class="price">$599</span>
Column 4:
<span class="price">$365</span>
Column 1:
<span class="h">Score</span>
Colums 2, 3, and 4 are blank.
Column 1 has text color set to rgba(167, 167, 177, 1): Price/Quality Score
Column 2:
<span class="global-score s-10"> <span class="score">9.4</span><span class="title">Price/Quality <br>Score</span></span>
Column 3:
<span class="global-score s-10"> <span class="score">9.7</span><span class="title">Price/Quality <br>Score</span></span>
Column 4:
<span class="global-score s-10"> <span class="score">9.9</span><span class="title">Price/Quality <br>Score</span></span>
Column 1 has text color set to rgba(167, 167, 177, 1): Design Score
Column 2:
<span class="average"><span class="score">8.7</span><span class="round-icon s-9"><svg id="feat_size" class="display-icon" width="12" height="12" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M14,187 L18,187 C19.1045695,187 20,187.895431 20,189 L20,197 C20,198.104569 19.1045695,199 18,199 L14,199 C12.8954305,199 12,198.104569 12,197 L12,189 C12,187.895431 12.8954305,187 14,187 Z M13,189 L13,197 L19,197 L19,189 L13,189 Z M23,187 C23.5522847,187 24,187.447715 24,188 L24,198 C24,198.552285 23.5522847,199 23,199 C22.4477153,199 22,198.552285 22,198 L22,188 C22,187.447715 22.4477153,187 23,187 Z" transform="translate(-12 -187)"></path> </svg></span></span><span class="title">Design</span>
Column 3:
<span class="average"><span class="score">9.2</span><span class="round-icon s-9"><svg id="feat_size" class="display-icon" width="12" height="12" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M14,187 L18,187 C19.1045695,187 20,187.895431 20,189 L20,197 C20,198.104569 19.1045695,199 18,199 L14,199 C12.8954305,199 12,198.104569 12,197 L12,189 C12,187.895431 12.8954305,187 14,187 Z M13,189 L13,197 L19,197 L19,189 L13,189 Z M23,187 C23.5522847,187 24,187.447715 24,188 L24,198 C24,198.552285 23.5522847,199 23,199 C22.4477153,199 22,198.552285 22,198 L22,188 C22,187.447715 22.4477153,187 23,187 Z" transform="translate(-12 -187)"></path> </svg></span></span><span class="title">Design</span>
Column 4:
<span class="average"><span class="score">9.0</span><span class="round-icon s-9"><svg id="feat_size" class="display-icon" width="12" height="12" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M14,187 L18,187 C19.1045695,187 20,187.895431 20,189 L20,197 C20,198.104569 19.1045695,199 18,199 L14,199 C12.8954305,199 12,198.104569 12,197 L12,189 C12,187.895431 12.8954305,187 14,187 Z M13,189 L13,197 L19,197 L19,189 L13,189 Z M23,187 C23.5522847,187 24,187.447715 24,188 L24,198 C24,198.552285 23.5522847,199 23,199 C22.4477153,199 22,198.552285 22,198 L22,188 C22,187.447715 22.4477153,187 23,187 Z" transform="translate(-12 -187)"></path> </svg></span></span><span class="title">Design</span>
Column 1 has text color set to rgba(167, 167, 177, 1): Performance Score
Column 2:
<span class="average"><span class="score">8.4</span><span class="round-icon s-8"><svg id="feat_soc" class="display-icon" width="12" height="12" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M23,20 L23.5,20 C23.7761424,20 24,20.2238576 24,20.5 L24,21.5 C24,21.7761424 23.7761424,22 23.5,22 L23,22 C23,23.1045695 22.1045695,24 21,24 L21,24.5 C21,24.7761424 20.7761424,25 20.5,25 L19.5,25 C19.2238576,25 19,24.7761424 19,24.5 L19,24 L17,24 L17,24.5 C17,24.7761424 16.7761424,25 16.5,25 L15.5,25 C15.2238576,25 15,24.7761424 15,24.5 L15,24 C13.8954305,24 13,23.1045695 13,22 L12.5,22 C12.2238576,22 12,21.7761424 12,21.5 L12,20.5 C12,20.2238576 12.2238576,20 12.5,20 L13,20 L13,18 L12.5,18 C12.2238576,18 12,17.7761424 12,17.5 L12,16.5 C12,16.2238576 12.2238576,16 12.5,16 L13,16 C13,14.8954305 13.8954305,14 15,14 L15,13.5 C15,13.2238576 15.2238576,13 15.5,13 L16.5,13 C16.7761424,13 17,13.2238576 17,13.5 L17,14 L19,14 L19,13.5 C19,13.2238576 19.2238576,13 19.5,13 L20.5,13 C20.7761424,13 21,13.2238576 21,13.5 L21,14 C22.1045695,14 23,14.8954305 23,16 L23.5,16 C23.7761424,16 24,16.2238576 24,16.5 L24,17.5 C24,17.7761424 23.7761424,18 23.5,18 L23,18 L23,20 Z M22,21.5 L22,20.5 L22,17.5 L22,16.5 L22,16 C22,15.4477153 21.5522847,15 21,15 L20.5,15 L19.5,15 L16.5,15 L15.5,15 L15,15 C14.4477153,15 14,15.4477153 14,16 L14,16.5 L14,17.5 L14,20.5 L14,21.5 L14,22 C14,22.5522847 14.4477153,23 15,23 L15.5,23 L16.5,23 L19.5,23 L20.5,23 L21,23 C21.5522847,23 22,22.5522847 22,22 L22,21.5 Z M17,17 L19,17 C19.5522847,17 20,17.4477153 20,18 L20,20 C20,20.5522847 19.5522847,21 19,21 L17,21 C16.4477153,21 16,20.5522847 16,20 L16,18 C16,17.4477153 16.4477153,17 17,17 Z" transform="translate(-12 -13)"></path> </svg></span></span><span class="title">Performance</span>
Column 3:
<span class="average"><span class="score">8.6</span><span class="round-icon s-8"><svg id="feat_soc" class="display-icon" width="12" height="12" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M23,20 L23.5,20 C23.7761424,20 24,20.2238576 24,20.5 L24,21.5 C24,21.7761424 23.7761424,22 23.5,22 L23,22 C23,23.1045695 22.1045695,24 21,24 L21,24.5 C21,24.7761424 20.7761424,25 20.5,25 L19.5,25 C19.2238576,25 19,24.7761424 19,24.5 L19,24 L17,24 L17,24.5 C17,24.7761424 16.7761424,25 16.5,25 L15.5,25 C15.2238576,25 15,24.7761424 15,24.5 L15,24 C13.8954305,24 13,23.1045695 13,22 L12.5,22 C12.2238576,22 12,21.7761424 12,21.5 L12,20.5 C12,20.2238576 12.2238576,20 12.5,20 L13,20 L13,18 L12.5,18 C12.2238576,18 12,17.7761424 12,17.5 L12,16.5 C12,16.2238576 12.2238576,16 12.5,16 L13,16 C13,14.8954305 13.8954305,14 15,14 L15,13.5 C15,13.2238576 15.2238576,13 15.5,13 L16.5,13 C16.7761424,13 17,13.2238576 17,13.5 L17,14 L19,14 L19,13.5 C19,13.2238576 19.2238576,13 19.5,13 L20.5,13 C20.7761424,13 21,13.2238576 21,13.5 L21,14 C22.1045695,14 23,14.8954305 23,16 L23.5,16 C23.7761424,16 24,16.2238576 24,16.5 L24,17.5 C24,17.7761424 23.7761424,18 23.5,18 L23,18 L23,20 Z M22,21.5 L22,20.5 L22,17.5 L22,16.5 L22,16 C22,15.4477153 21.5522847,15 21,15 L20.5,15 L19.5,15 L16.5,15 L15.5,15 L15,15 C14.4477153,15 14,15.4477153 14,16 L14,16.5 L14,17.5 L14,20.5 L14,21.5 L14,22 C14,22.5522847 14.4477153,23 15,23 L15.5,23 L16.5,23 L19.5,23 L20.5,23 L21,23 C21.5522847,23 22,22.5522847 22,22 L22,21.5 Z M17,17 L19,17 C19.5522847,17 20,17.4477153 20,18 L20,20 C20,20.5522847 19.5522847,21 19,21 L17,21 C16.4477153,21 16,20.5522847 16,20 L16,18 C16,17.4477153 16.4477153,17 17,17 Z" transform="translate(-12 -13)"></path> </svg></span></span><span class="title">Performance</span>
Column 4:
<span class="average"><span class="score">8.6</span><span class="round-icon s-8"><svg id="feat_soc" class="display-icon" width="12" height="12" viewBox="0 0 12 12"> <path fill-rule="evenodd" d="M23,20 L23.5,20 C23.7761424,20 24,20.2238576 24,20.5 L24,21.5 C24,21.7761424 23.7761424,22 23.5,22 L23,22 C23,23.1045695 22.1045695,24 21,24 L21,24.5 C21,24.7761424 20.7761424,25 20.5,25 L19.5,25 C19.2238576,25 19,24.7761424 19,24.5 L19,24 L17,24 L17,24.5 C17,24.7761424 16.7761424,25 16.5,25 L15.5,25 C15.2238576,25 15,24.7761424 15,24.5 L15,24 C13.8954305,24 13,23.1045695 13,22 L12.5,22 C12.2238576,22 12,21.7761424 12,21.5 L12,20.5 C12,20.2238576 12.2238576,20 12.5,20 L13,20 L13,18 L12.5,18 C12.2238576,18 12,17.7761424 12,17.5 L12,16.5 C12,16.2238576 12.2238576,16 12.5,16 L13,16 C13,14.8954305 13.8954305,14 15,14 L15,13.5 C15,13.2238576 15.2238576,13 15.5,13 L16.5,13 C16.7761424,13 17,13.2238576 17,13.5 L17,14 L19,14 L19,13.5 C19,13.2238576 19.2238576,13 19.5,13 L20.5,13 C20.7761424,13 21,13.2238576 21,13.5 L21,14 C22.1045695,14 23,14.8954305 23,16 L23.5,16 C23.7761424,16 24,16.2238576 24,16.5 L24,17.5 C24,17.7761424 23.7761424,18 23.5,18 L23,18 L23,20 Z M22,21.5 L22,20.5 L22,17.5 L22,16.5 L22,16 C22,15.4477153 21.5522847,15 21,15 L20.5,15 L19.5,15 L16.5,15 L15.5,15 L15,15 C14.4477153,15 14,15.4477153 14,16 L14,16.5 L14,17.5 L14,20.5 L14,21.5 L14,22 C14,22.5522847 14.4477153,23 15,23 L15.5,23 L16.5,23 L19.5,23 L20.5,23 L21,23 C21.5522847,23 22,22.5522847 22,22 L22,21.5 Z M17,17 L19,17 C19.5522847,17 20,17.4477153 20,18 L20,20 C20,20.5522847 19.5522847,21 19,21 L17,21 C16.4477153,21 16,20.5522847 16,20 L16,18 C16,17.4477153 16.4477153,17 17,17 Z" transform="translate(-12 -13)"></path> </svg></span></span><span class="title">Performance</span>
Column 1 has text color set to rgba(167, 167, 177, 1): Camera Score
Column 2:
<span class="average"><span class="score">9.5</span><span class="round-icon s-10"><svg id="feat_camera" width="14" height="12" class="display-icon" viewBox="0 0 14 12"> <path fill-rule="evenodd" d="M17,101 L22,101 C23.6568542,101 25,102.343146 25,104 L25,108 C25,109.656854 23.6568542,111 22,111 L14,111 C12.3431458,111 11,109.656854 11,108 L11,104 C11,102.343146 12.3431458,101 14,101 C14,100.447715 14.4477153,100 15,100 L16,100 C16.5522847,100 17,100.447715 17,101 Z M16,102 C14.8954305,102 14,102.895431 14,104 L14,108 C14,109.104569 14.8954305,110 16,110 L22,110 C23.1045695,110 24,109.104569 24,108 L24,104 C24,102.895431 23.1045695,102 22,102 L16,102 Z M19,109 C17.3431458,109 16,107.656854 16,106 C16,104.343146 17.3431458,103 19,103 C20.6568542,103 22,104.343146 22,106 C22,107.656854 20.6568542,109 19,109 Z M19,108 C20.1045695,108 21,107.104569 21,106 C21,104.895431 20.1045695,104 19,104 C17.8954305,104 17,104.895431 17,106 C17,107.104569 17.8954305,108 19,108 Z" transform="translate(-11 -100)"></path> </svg></span></span><span class="title">Camera</span>
Column 3:
<span class="average"><span class="score">9.1</span><span class="round-icon s-10"><svg id="feat_camera" width="14" height="12" class="display-icon" viewBox="0 0 14 12"> <path fill-rule="evenodd" d="M17,101 L22,101 C23.6568542,101 25,102.343146 25,104 L25,108 C25,109.656854 23.6568542,111 22,111 L14,111 C12.3431458,111 11,109.656854 11,108 L11,104 C11,102.343146 12.3431458,101 14,101 C14,100.447715 14.4477153,100 15,100 L16,100 C16.5522847,100 17,100.447715 17,101 Z M16,102 C14.8954305,102 14,102.895431 14,104 L14,108 C14,109.104569 14.8954305,110 16,110 L22,110 C23.1045695,110 24,109.104569 24,108 L24,104 C24,102.895431 23.1045695,102 22,102 L16,102 Z M19,109 C17.3431458,109 16,107.656854 16,106 C16,104.343146 17.3431458,103 19,103 C20.6568542,103 22,104.343146 22,106 C22,107.656854 20.6568542,109 19,109 Z M19,108 C20.1045695,108 21,107.104569 21,106 C21,104.895431 20.1045695,104 19,104 C17.8954305,104 17,104.895431 17,106 C17,107.104569 17.8954305,108 19,108 Z" transform="translate(-11 -100)"></path> </svg></span></span><span class="title">Camera</span>
Column 4:
<span class="average"><span class="score">8.8</span><span class="round-icon s-10"><svg id="feat_camera" width="14" height="12" class="display-icon" viewBox="0 0 14 12"> <path fill-rule="evenodd" d="M17,101 L22,101 C23.6568542,101 25,102.343146 25,104 L25,108 C25,109.656854 23.6568542,111 22,111 L14,111 C12.3431458,111 11,109.656854 11,108 L11,104 C11,102.343146 12.3431458,101 14,101 C14,100.447715 14.4477153,100 15,100 L16,100 C16.5522847,100 17,100.447715 17,101 Z M16,102 C14.8954305,102 14,102.895431 14,104 L14,108 C14,109.104569 14.8954305,110 16,110 L22,110 C23.1045695,110 24,109.104569 24,108 L24,104 C24,102.895431 23.1045695,102 22,102 L16,102 Z M19,109 C17.3431458,109 16,107.656854 16,106 C16,104.343146 17.3431458,103 19,103 C20.6568542,103 22,104.343146 22,106 C22,107.656854 20.6568542,109 19,109 Z M19,108 C20.1045695,108 21,107.104569 21,106 C21,104.895431 20.1045695,104 19,104 C17.8954305,104 17,104.895431 17,106 C17,107.104569 17.8954305,108 19,108 Z" transform="translate(-11 -100)"></path> </svg></span></span><span class="title">Camera</span>
Column 1 has text color set to rgba(167, 167, 177, 1): Battery Score
Column 2:
<span class="average"><span class="score">7.0</span><span class="round-icon s-7"><svg id="feat_battery" class="display-icon" weight="14" height="8" viewBox="0 0 14 8"> <path fill-rule="evenodd" d="M24,76 L25,76 L25,78 L24,78 L24,79 C24,80.1045695 23.1045695,81 22,81 L13,81 C11.8954305,81 11,80.1045695 11,79 L11,75 C11,73.8954305 11.8954305,73 13,73 L22,73 C23.1045695,73 24,73.8954305 24,75 L24,76 Z M13,74 C12.4477153,74 12,74.4477153 12,75 L12,79 C12,79.5522847 12.4477153,80 13,80 L22,80 C22.5522847,80 23,79.5522847 23,79 L23,75 C23,74.4477153 22.5522847,74 22,74 L13,74 Z M13,75 L19,75 L19,79 L13,79 L13,75 Z" transform="translate(-11 -73)"></path> </svg></span></span><span class="title">Battery</span>
Column 3:
<span class="average"><span class="score">8.4</span><span class="round-icon s-7"><svg id="feat_battery" class="display-icon" weight="14" height="8" viewBox="0 0 14 8"> <path fill-rule="evenodd" d="M24,76 L25,76 L25,78 L24,78 L24,79 C24,80.1045695 23.1045695,81 22,81 L13,81 C11.8954305,81 11,80.1045695 11,79 L11,75 C11,73.8954305 11.8954305,73 13,73 L22,73 C23.1045695,73 24,73.8954305 24,75 L24,76 Z M13,74 C12.4477153,74 12,74.4477153 12,75 L12,79 C12,79.5522847 12.4477153,80 13,80 L22,80 C22.5522847,80 23,79.5522847 23,79 L23,75 C23,74.4477153 22.5522847,74 22,74 L13,74 Z M13,75 L19,75 L19,79 L13,79 L13,75 Z" transform="translate(-11 -73)"></path> </svg></span></span><span class="title">Battery</span>
Column 4:
<span class="average"><span class="score">7.7</span><span class="round-icon s-7"><svg id="feat_battery" class="display-icon" weight="14" height="8" viewBox="0 0 14 8"> <path fill-rule="evenodd" d="M24,76 L25,76 L25,78 L24,78 L24,79 C24,80.1045695 23.1045695,81 22,81 L13,81 C11.8954305,81 11,80.1045695 11,79 L11,75 C11,73.8954305 11.8954305,73 13,73 L22,73 C23.1045695,73 24,73.8954305 24,75 L24,76 Z M13,74 C12.4477153,74 12,74.4477153 12,75 L12,79 C12,79.5522847 12.4477153,80 13,80 L22,80 C22.5522847,80 23,79.5522847 23,79 L23,75 C23,74.4477153 22.5522847,74 22,74 L13,74 Z M13,75 L19,75 L19,79 L13,79 L13,75 Z" transform="translate(-11 -73)"></path> </svg></span></span><span class="title">Battery</span>
Column 1:
<span class="h">User reviews</span>
Colums 2, 3, and 4 are blank.
Column 1 has text color set to rgba(167, 167, 177, 1): User Score
Column 2:
<div class="global-user-score"> <div class="score">9.9</div><div class="number-opinions">19 reviews</div></div>
Column 3:
<div class="global-user-score"> <div class="score">7.8</div><div class="number-opinions">24 reviews</div></div>
Column 4:
<div class="global-user-score"> <div class="score">9.1</div><div class="number-opinions">48 reviews</div></div>
Column 1:
<span class="h">Screen</span>
Colums 2, 3, and 4 are blank.
Column 1 has text color set to rgba(167, 167, 177, 1): Inches
Column 2: 6.58″
Column 3: 6.9″
Column 4: 6.67″
Column 1 has text color set to rgba(167, 167, 177, 1): Resolution
Column 2: FHD+
Column 3: WQHD+
Column 4: FHD+
Column 1 has text color set to rgba(167, 167, 177, 1): Usable surface
Column 2: 92% useful
Column 3: 90% useful
Column 4: 89% useful
Column 1 has text color set to rgba(167, 167, 177, 1): Aspect ratio
Column 2: 20:9
Column 3: 20:9
Column 4: 19.5:9
Column 1:
<span class="h">Structure</span>
Colums 2, 3, and 4 are blank.
Column 1 has text color set to rgba(167, 167, 177, 1): Dimensions
Column 2:
72.6 mm <br> 158.2 mm <br>9.0 mm
Column 3:
76.0 mm <br> 166.9 mm <br>8.8 mm
Column 4:
74.8 mm<br> 162.6 mm<br>9.0 mm
Column 1 has text color set to rgba(167, 167, 177, 1): Weight
Column 2: 209 g
Column 3: 222 g
Column 4: 208 g
Column 1:
<span class="h">Performance</span>
Colums 2, 3, and 4 are blank.
Column 1 has text color set to rgba(167, 167, 177, 1): Micro
Column 2: Kirin 990 Octa-Core
Column 3: Exynos 990 Octa-Core
Column 4: SnapD. 865 Octa-Core
Column 1 has text color set to rgba(167, 167, 177, 1): RAM
Column 2: 8 GB RAM
Column 3: 12 GB RAM
Column 4: 8 GB RAM
Column 1 has text color set to rgba(167, 167, 177, 1): Storage
Column 2: 256 GB
Column 3: 128 GB
Column 4: 256 GB
Column 1 has text color set to rgba(167, 167, 177, 1): SD Slot
Column 2:
<img src="https://wpdatatables.com/wp-content/uploads/2021/07/icon-yes.png" class=" aligncenter size-thumbnail" width="20" height="20"" />
Column 3:
<img src="https://wpdatatables.com/wp-content/uploads/2021/07/icon-yes.png" class=" aligncenter size-thumbnail" width="20" height="20"" />
Column 4:
<img src="https://wpdatatables.com/wp-content/uploads/2021/07/icon-no.png" class=" aligncenter size-thumbnail" width="20" height="20"" />
Column 1 has text color set to rgba(167, 167, 177, 1): Battery
Column 2: 4200 mAh
Column 3: 5000 mAh
Column 4: 4780 mAh
Column 1 has text color set to rgba(167, 167, 177, 1): Main Camera
Column 2: 52 Mpx
Column 3: 108 Mpx
Column 4: 108 Mpx
Column 1 has text color set to rgba(167, 167, 177, 1): Selfie Camera
Column 2: SELF 32 Mpx
Column 3: SELF 40 Mpx
Column 4: SELF 20 Mpx
Column 1 has text color set to rgba(167, 167, 177, 1): OS
Column 2: Android 10 Q
Column 3: Android 11 Red Velvet Cake
Column 4: Android 10 Q
Column 1 has text color set to rgba(167, 167, 177, 1): More info
Column 2:
<a href="https://www.amazon.com/dp/B086FFFGJL?tag=gsmarena093-20&linkCode=osi&th=1&psc=1" target="_blank"><img data-media-content="wpdt-media-content" src="https://wpdatatables.com/wp-content/uploads/2021/07/Screenshot-from-2021-06-29-10-53-24.png" class=" aligncenter size-full" width="128" height="64" /></a>
Column 3:
<a href="https://www.amazon.com/Samsung-Unlocked-Smartphone-Pro-Grade-Lavender/dp/B08FYTRF6J/ref=sr_1_2_sspa?crid=75BPC49WFO16&dchild=1&keywords=samsung+galaxy+s20+ultra+5g&qid=1624955033&sprefix=Samsung+Galaxy+S20+Ultra%2Caps%2C281&sr=8-2-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzOTBGTVQ2WDkxQ1YxJmVuY3J5cHRlZElkPUEwOTMzODYzWFdWVzBaOU05MzIzJmVuY3J5cHRlZEFkSWQ9QTA5NzkyNTkxVlM5T1VZMTBQN1hIJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==" target="_blank"><img data-media-content="wpdt-media-content" src="https://wpdatatables.com/wp-content/uploads/2021/07/Screenshot-from-2021-06-29-10-53-24.png" class=" aligncenter size-full" width="128" height="64" /></a>
Column 4:
<a href="https://www.amazon.com/Xiaomi-Note-10-Lite-International/dp/B0887V5WZ6/ref=sr_1_4?dchild=1&keywords=Xiaomi+Mi+10&qid=1624954920&sr=8-4" target="_blank"><img data-media-content="wpdt-media-content" src="https://wpdatatables.com/wp-content/uploads/2021/07/Screenshot-from-2021-06-29-10-53-24.png" class=" aligncenter size-full" width="128" height="64" /></a>
That completes the table construction in the back-end, so now just click on “Save Changes” in the top right, and add the table to one of your front-end pages either by using its shortcode, or by using one of the supported builders’ blocks.
When you add the table on the page, you’ll see a plain table (a simple table) that doesn’t resemble the table you see in our documentation.
In order to apply all the styles you see there, you need to copy and paste the following CSS, but please keep in mind that you need to change all references to the table ID, so it matches the ID of your table.
The ID you’ll have to change is: “wpdtSimpleTable-171”.
We suggest you copy the following CSS and paste it into a text editor where you can Find All/Replace All so find all instances of “wpdtSimpleTable-171” and replace them with the ID of your table (for example “wpdtSimpleTable-10”).
.wdt-white-background {
background: #FFF;
padding-top: 30px;
}
.vc_tta-tab>a {
background-color: #091D70 !important;
color: #FFFFFF !important;
}
.vc_tta-tab>a:hover,.vc_tta-tab.vc_active>a {
background-color: #FFFFFF !important;
color: #091D70 !important;
}
#wpdtSimpleTable-171 td .global-score.s-10 {
background-color: #07ce7d;
}
#wpdtSimpleTable-171 td .global-score {
display: inline-block;
vertical-align: top;
padding: 6px 12px;
margin-bottom: 6px;
border-radius: 12px;
}
#wpdtSimpleTable-171 td .global-score .score {
display: inline-block;
vertical-align: top;
line-height: .9;
font-size: 30px;
font-weight: 700;
color: #fff;
min-width: 48px;
}
#wpdtSimpleTable-171 td .global-score .title {
display: inline-block !important;
vertical-align: top;
margin-left: 6px;
font-size: 12px;
line-height: 1.2;
font-weight: 700;
color: #fff;
}
#wpdtSimpleTable-171 td .average {
margin-left: 7%;
}
#wpdtSimpleTable-171 td .average .score {
line-height: 1;
min-width: 32px;
}
#wpdtSimpleTable-171 td .average .score {
font-size: 20px;
line-height: .8;
font-weight: 700;
display: -moz-inline-stack;
display: inline-block;
}
#wpdtSimpleTable-171 td .average .round-icon {
margin: -7px 4px -1px 8px;
}
#wpdtSimpleTable-171 td .average .round-icon.s-10 {
background: #08e58b;
}
#wpdtSimpleTable-171 td .average .round-icon.s-9 {
background: #41ea67;
}
#wpdtSimpleTable-171 td .average .round-icon.s-8 {
background: #76ef53;
}
#wpdtSimpleTable-171 td .average .round-icon.s-7 {
background: #a8f340;
}
#wpdtSimpleTable-171 td .round-icon {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
vertical-align: middle;
text-align: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #4f4e56;
}
#wpdtSimpleTable-171 td .display-icon {
fill: #fff;
margin-top: 5px;
}
#wpdtSimpleTable-171 td .average + .title {
vertical-align: middle;
display: inline-block;
margin-top: -5px;
}
#wpdtSimpleTable-171 td .title {
font-size: 12px;
color: #a7a7b1;
}
#wpdtSimpleTable-171 td .global-user-score .score {
display: inline-block;
vertical-align: top;
line-height: .9;
font-size: 30px;
font-weight: 700;
color: #4f4e56;
min-width: 48px;
}
#wpdtSimpleTable-171 td {
font-size: 14px;;
}
#wpdtSimpleTable-171 td .h {
box-shadow: inset 0 -7px #ffffa0;
display: inline;
font-size: 16px;
font-weight: 600;
color: #4f4e56;
}
#wpdtSimpleTable-171 td .price {
font-size: 30px;
font-weight: 600;
color: #4f4e56;
padding: 20px 0;
display: inline-block;
}
#wpdtSimpleTable-171 tr:first-child td img {
padding: 20px;
}
To get your hands on wpDataTables Lite, please enter your email address below. We’ll send you a direct download link and keep you updated on existing features along with helpful tips and tricks!
