Template:Infobox: Difference between revisions

Newer edit →

VisualWikitext

@@ Line 1: / Line 1: @@
-<div style="border:1px solid #aaa; background:#f9f9f9; padding:10px; width:300px; font-family:Arial, sans-serif;">
+<style>
-   <table style="width:100%; border-collapse:collapse;">
+.infobox {
-    <tr>
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-      <th colspan="2" style="background:#666; color:#fff; padding:8px; font-size:1.2em; text-align:center;">
+  font-size: 88%;
-        {{{title|Infobox}}}
+  border: 1px solid #aaa;
-      </th>
+  background-color: #f8f9fa;
-    </tr>
+  padding: 8px;
-    {{#if:{{{image|}}}
+  width: 300px;
-      | <tr>
+  border-collapse: collapse;
-          <td colspan="2" style="text-align:center; padding:5px;">
+   margin: 0 0 1em 1em;
-            [[File:{{{image}}}|250px|center|alt={{{title}}}]]
+  float: right;
-          </td>
+}
-        </tr>
-    }}
+.infobox th {
-    {{#if:{{{caption|}}}
+  background-color: #a2a9b1;
-      | <tr>
+  color: white;
-          <td colspan="2" style="text-align:center; font-style:italic; font-size:0.9em; padding-bottom:8px;">
+  font-weight: bold;
-            {{{caption}}}
+  padding: 0.3em 0.6em;
-          </td>
+  text-align: center;
-        </tr>
+  font-size: 110%;
-    }}
+  border: 1px solid #888;
-    {{#if:{{{label1|}}}
+}
-      | <tr>
-          <th style="background:#eee; padding:4px; width:35%;">{{{label1}}}</th>
+.infobox td {
-          <td style="padding:4px;">{{{data1}}}</td>
+  border: 1px solid #888;
-        </tr>
+  padding: 0.25em 0.6em;
-    }}
+  vertical-align: top;
-    {{#if:{{{label2|}}}
+}
-      | <tr>
-          <th style="background:#eee; padding:4px;">{{{label2}}}</th>
+.infobox caption {
-          <td style="padding:4px;">{{{data2}}}</td>
+  font-weight: bold;
-        </tr>
+  font-size: 110%;
-    }}
+  margin-bottom: 0.5em;
-    {{#if:{{{label3|}}}
+  caption-side: top;
-      | <tr>
+}
-          <th style="background:#eee; padding:4px;">{{{label3}}}</th>
-          <td style="padding:4px;">{{{data3}}}</td>
+.infobox-image {
-        </tr>
+  margin: 0 auto 0.5em auto;
-     }}
+  text-align: center;
-  </table>
+}
-</div>
+.infobox-image img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>
+<table class="infobox" role="presentation">
+  <caption>{{{title|Infobox}}}</caption>
+  {{#if:{{{image|}}}
+    | <tr>
+        <td class="infobox-image" colspan="2">
+          [[File:{{{image}}}|frameless|alt={{{title}}}]]
+        </td>
+      </tr>
+  }}
+  {{#if:{{{caption|}}}
+    | <tr>
+        <td colspan="2" style="text-align:center; font-style:italic; font-size: 90%; padding-bottom: 0.5em;">
+          {{{caption}}}
+        </td>
+      </tr>
+  }}
+  {{#if:{{{label1|}}}
+    | <tr>
+        <th scope="row">{{{label1}}}</th>
+        <td>{{{data1}}}</td>
+      </tr>
+  }}
+  {{#if:{{{label2|}}}
+    | <tr>
+        <th scope="row">{{{label2}}}</th>
+        <td>{{{data2}}}</td>
+      </tr>
+  }}
+  {{#if:{{{label3|}}}
+    | <tr>
+        <th scope="row">{{{label3}}}</th>
+        <td>{{{data3}}}</td>
+      </tr>
+  }}
+  {{#if:{{{label4|}}}
+    | <tr>
+        <th scope="row">{{{label4}}}</th>
+        <td>{{{data4}}}</td>
+      </tr>
+  }}
+  {{#if:{{{label5|}}}
+     | <tr>
+        <th scope="row">{{{label5}}}</th>
+        <td>{{{data5}}}</td>
+      </tr>
+  }}
+</table>