aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Improved backgrounds, builds, readability, roundings and Added lists properly

Browse Source 
Update .gitignore, compile.cmd, and 20 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2024-11-20 22:53:18 +01:00
parent d7d4dfba15
commit cdd0aba327
22 changed files with 404 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
htdocs/parts/tables.php
View File

@@ -12,54 +12,57 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</h2>
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-s">Unstyled table</h3>
<p class="mb-s">
Unstyled tables have no cell gap, no border and no other form of styling.
</p>
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
<b>table&gt;tr*2&gt;td*2</b>
</code>
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Unstyled table</h3>
<div class="px-s">
<p class="mb-s">
Unstyled tables have no cell gap, no border and no other form of styling.
</p>
<table>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
<b>table&gt;tr*2&gt;td*2</b>
</code>
</div>
<h3 class="t-w-500 t-size-12 my-s">Stylish table</h3>
<p class="mb-xxs">
Tables can quickly be styled by simply using the following classes:
</p>
<ul class="mb-s">
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
</ul>
<table class="stylish table-p-s border">
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
table<b>.stylish.table-p-s.border</b><br>
&nbsp;&nbsp;th>td*2<br>
&nbsp;&nbsp;tr*2>td*2
</code>
<h3 class="t-w-500 t-size-12 my-s mt-l">Stylish table</h3>
<div class="px-s">
<p class="mb-xxs">
Tables can quickly be styled by simply using the following classes:
</p>
<ul class="mb-s list-bullets list-bullet-manual ml-xs">
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
</ul>
<table class="stylish table-p-s border">
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
</table>
<code class="d-block p-xxs border r-s mt-s">
table<b>.stylish.table-p-s.border</b><br>
&nbsp;&nbsp;th>td*2<br>
&nbsp;&nbsp;tr*2>td*2
</code>
</div>