Creating Responsive Tables with CSS and HTML in Blogger Blog

Creating Responsive Tables with CSS and HTML in Blogger Blog

You've made a table in HTML? If so, this article is for you. To that end, continue reading my article. Because of the topics presented today is quite interesting, namely: Creating Responsive Tables with CSS and HTML in Blogger Blog. Blog here aimed at creating a blog with blogger plaform, to HTML offlinenya next time. Of this title may appear to be responsive question why? Starting from the widespread use of gadgets, starting from smartphone to tablet. Display webiste website / blog must follow mobile phone screen size is flexible, because so many of its people are using gadgets to carry out its activities in surfing the internet. Apart from on the table was that we knew so many potential uses, like it or not / should even make the table responsive. Ya..kalau not want to be left directly by visitors. hehe

Maybe if you go on your laptop / PC table will be normal. But, try to be opened in the gadget smartphone screen size is quite narrow, the table does not follow the screen or even sideways, beyond the side of the screen.

Creation of tables for the web using HTML code, but there should be supporting her in order to be responsive ie tables with CSS code. Because here I am not going to review what it's more about the CSS. Back to the topic we now discuss, let's just practice.

Create Table Standard

Create a new post on the blog

To the HTML tab, you typed the code below

<tr>

<th>Spesifikasi</th>

<th>Minimum</th>

</tr>

<tr>

<td>Processor</td>

</tr>

<tr>

<td>256 MB(512 MB up recomended</td>

</tr>

</table>

Please Post, When you see the results up here, the tables have not been responsive and zoom still mediocre. So let us go to the next stage

Creating CSS

√ Towards Template menu

√ Then Edit HTML

√ box appears where the HTML code

√ Instant search code </ head> (quick way: CTRL + F and typing </ head>)

√ Type the following code, the above code </ head>

/* CSS Post Table by GoWidget*/

.post-body table th, .post-body table td, .post-body table caption{border:1px solid #d8dde1;padding:.2em .5em;text-align:left;vertical-align:top;}

.post-body table.tr-caption-container {border:1px solid #d8dde1;}

.post-body th{font-weight:700;}

.post-body table caption{border:none;font-style:italic;}

.post-body table{}

.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #d8dde1;}

.post-body th{background:#109C02;color:#fff;}

.post-body table.tr-caption-container td {border:none;padding:8px;}

.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}

.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}

img {max-width:100%;height:auto;border:none;}

table {max-width:100%;width:100%;margin:1.5em auto;}

table.section-columns td.first.columns-cell{border-left:none}

table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}

table.columns-2 td.columns-cell{width:50%}

table.columns-3 td.columns-cell{width:33.33%}

table.columns-4 td.columns-cell{width:25%}

table.section-columns td.columns-cell{vertical-align:top}

table.tr-caption-container{padding:4px;margin-bottom:.5em}

td.tr-caption{font-size:80%}

√ Then you try to save and see the result

√ Congratulations table was already responsive mobile

The result is more or less like this:

Table standard (read: lots used) if the Issuer does not really need a lot of the head of the table structure. As the above example only create Specifications and Minimum alone. There is another form of tables that require the head of his table many, such as those used for table specification of mobile phones, motors, and others.

Create Table form second (specification mobile phones, motors, etc.)

√ Create a new post on the blog

√ Go to the HTML tab, then typing the code below

<tr>

<th width=35%>Peluncuran</th>

<td>Januari 2016</td>

</tr>

<tr>

<th width=35%>Kartu SIM</th>

<td>Dual SIM (Nano-SIM/ Micro-SIM, dual stand-by)</td>

</tr>

</table>

√ Recently Publish and see the results

The result is more or less like this:

Like that article tutorial on Creating Tables Responsive HTML with CSS in Blog, by creating a table that is responsive to spoil and make visitors feel at home which is open to use gadgets. good luck