Writing Code:
<div class='pre tb'>
<!--[ Active function ]-->
<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
<!--[ Header/title ]-->
<div class='preH tbHd scrlH'>
<!--[ Change atribute data-text='...' to replace title ]-->
<label for='preT-1' data-text='HTML'></label>
<label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
</div>
<!--[ Content ]-->
<div class='preC-1'>
<pre>Your_code_is_here</pre>
</div>
<div class='preC-2'>
<pre>Your_code_is_here</pre>
</div>
<div class='preC-3'>
<pre>Your_code_is_here</pre>
</div>
</div>
- The
checkedattribute defines the first tab that appears by default. - Make sure
id='...'andfor='...'attributes have the same value. ID must be unique, there cannot be two identical IDs in one page. - Change
data-text='HTML'attribute in the highlighted section to rename the tab.
Toggle Show / Hide
Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button.
Any content can be included in this widget.
Spoiler:
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
<details class='sp'> <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary> <p>Your_text_is_here.</p> </details>
Writing Code:
<div class='pre tb'>
<!--[ Active function ]-->
<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
<!--[ Header/title ]-->
<div class='preH tbHd scrlH'>
<!--[ Change atribute data-text='...' to replace title ]-->
<label for='preT-1' data-text='HTML'></label>
<label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
</div>
<!--[ Content ]-->
<div class='preC-1'>
<pre>Your_code_is_here</pre>
</div>
<div class='preC-2'>
<pre>Your_code_is_here</pre>
</div>
<div class='preC-3'>
<pre>Your_code_is_here</pre>
</div>
</div>
- The
checkedattribute defines the first tab that appears by default. - Make sure
id='...'andfor='...'attributes have the same value. ID must be unique, there cannot be two identical IDs in one page. - Change
data-text='HTML'attribute in the highlighted section to rename the tab.
Toggle Show / Hide
Used to create interactive widgets that the user can open and close on demand. By default this widget is closed, will display the content in it when the user presses the command button.
Any content can be included in this widget.
Spoiler:
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
<details class='sp'> <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary> <p>Your_text_is_here.</p> </details>
<div class='table'>
<table style='white-space:nowrap; min-width:100%;'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</div>
white-space:nowrap;specifies the text to be a single line, it will not wrap to the next line and will continue until<br>tag is encountered.min-width:100%;defines the minimum width of table, you can change it to px units for example500px. Change it to0if you want the table width to be determined automatically.

