AHA Sarang Komputer: Table- Membuat Tabel Dan Menyisipkan Pre-render

Table- Membuat Tabel Dan Menyisipkan Pre-render

Dalam menampilkan suatu konten pada html, dapat dengan menggunakan layer div, paragrap p, tabel table, span dan lain - lain. Namun ada kalanya satu tampilan harus ditampilkan dalam bentuk kode parsing html, terutama konten tutorial. Anda dapat menggunakan render pre, seperti contoh ini :

  <pre> konten </pre>

Pre - render ini efektif bekerja pada tag layer dan tag paragraf dan tidak bekerja dengan baik pada tag table. Lalu bagaimana penyelesainnya?

Sebelum dilanjutkan Anda dapat melihat hasil pembutan pre pada tag table yang bekerja dengan baik di sini: Kode Simbol HTML

Untuk Tabel, penggunaan desain tabel biasanya dibuat untuk parameter dokumen atau data eksternal. Tampilan akan terlihat presisi setiap kolom dan row dengan pengaturan panjang, lebar dan tinggi. Tampilan pun dapat dibuat responsive display dengan pembuatan pengaturan menggunakan parameter prosentase.

Dan secara umum desain tabel akan menampilkan pengkelasan data file dokumen yang terperinci dalam list ke kanan dan ke bawah, menurut jumlah , jenis, ukuran dan lain sebagainya. Terkadang untuk kebutuhan tutorial, harus menampilkan satu data render dari hexa, xml dan lain - lain dalam bentuk table karena ada pengkelasan yang harus disusun, sehingga tampilan menjadi tersusun rapih sebagai sebuah tabel.

Ada hal yang istimewa pada desain tabel, terutama pada data render, data render tidak dapat ditampilkan. Misalkan untuk menampilkan data render parse html bukan parse html. jika tidak dilakukan render parse, maka yang ditampilkan seperti ini

<html>
<head>
  <title>Your Domain Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<body>
  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>
</body>
</html>

Sedangkan yang Anda harapkan bisa menampilkan seperti ini:

&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Your Domain Title&lt;/title&gt;
    &lt;!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters --&gt;
  &lt;meta property=&quot;og:url&quot;           content=&quot;http://www.your-domain.com/your-page.html&quot; /&gt;
  &lt;meta property=&quot;og:type&quot;          content=&quot;website&quot; /&gt;
  &lt;meta property=&quot;og:title&quot;         content=&quot;Your Website Title&quot; /&gt;
  &lt;meta property=&quot;og:description&quot;   content=&quot;Your description&quot; /&gt;
  &lt;meta property=&quot;og:image&quot;         content=&quot;http://www.your-domain.com/path/image.jpg&quot; /&gt;
&lt;/head&gt;
&lt;!-- Load Facebook SDK for JavaScript --&gt;
  &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
  &lt;script&gt;(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
  }(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));&lt;/script&gt;
&lt;body&gt;
  &lt;!-- Your share button code --&gt;
  &lt;div class=&quot;fb-share-button&quot; 
    data-href=&quot;http://www.your-domain.com/your-page.html&quot; 
    data-layout=&quot;button_count&quot;&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Untuk dapat menampilkan data render parsing html pada dalam table, maka anda harus melakukan parsing dua kali. Contoh kasus pada kode spasi

&nbsp;

. Kode ini tidak akan tampil pada pre - render, maka agar dapat tampil kode "&" harus diparsing dengan menambahkan kode

amp;

. Maka konten pada tabel akan berhasil menampilkan

&nbsp;

Demikian tip membuat kode render di dalam desain table. Anda dapat mencobanya dan atau jika masih kesulitan untuk membuat pre-render pada desain tabel, bisa hubungi kami di email :ahmad.hanafiah33@gmail.com, atau dapat di nomor WA 6281511271079.

Jika artikel ini berguna silahkan bagikan ke teman atau saudara.

Semoga bermanfaat.

AHA SARANG KOMPUTER adalah Perusahanan pembuatan Website yang berbasis di kota Bogor.

Thursday, 21 November 2019

Table- Membuat Tabel Dan Menyisipkan Pre-render

Artikel Terkait:

No comments:

Post a Comment