نحوه استفاده از کد های html و cssدر جوملا

سلام دوستان
من می خوام از یه کد html برای قراردادن یه جدول توی سایتم استفاده کنم
این جدول یک کد html و یه کدcss داره کد html رو توی مطلب وارد میکنم جدول رو نشون میده ولی نمیدونم کد css رو کجا باید وارد کنم تا تنظیمات گرافیکی روی جدول اعمال بشه. کد CSS رو بعد از اینکه روی دکمه ی HTML کلیک کردم بین دوتا تگ STYLE قبل از HEAD قرار دادم ولی باز تغییری اعمال نشد.ممنون میشم اگه بگید کجا باید بذارمش این کد رو

درود

اول شی (مطلب ، ... ) که میخواهید css به آن اعمال شود را انتخاب کنید و بعد روی آیکن کیلیک کن بعد css را در محل مشخص شده وارد کن .

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

آقا من این کارو کردم درست نشد
کد html
<h1>Responstable <span>2.0</span> by <span>jordyvanraaij</span></h1>

<table class="responstable">

<tr>
<th>Main driver</th>
<th data-th="Driver details"><span>First name</span></th>
<th>Surname</th>
<th>Date of birth</th>
<th>Relationship</th>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Policyholder</td>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Steffie</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Spouse</td>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Stan</td>
<td>Foo</td>
<td>01/01/1994</td>
<td>Son</td>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Stella</td>
<td>Foo</td>
<td>01/01/1992</td>
<td>Daughter</td>
</tr>

</table>


کد css

/*

RESPONSTABLE 2.0 by jordyvanraaij
Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

*/

// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;

// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;

// The Responstable mixin

@mixin responstable(
$breakpoint: $table-breakpoint,
$background-color: $table-background-color,
$text-color: $table-text-color,
$outer-border: $table-outer-border,
$cell-border: $table-cell-border,
$border-radius: none,
$highlight-color: none,
$header-background-color: $table-background-color,
$header-text-color: $table-text-color,
$header-border: $table-cell-border) {

.responstable {
margin: 1em 0;
width: 100%;
overflow: hidden;
background: $background-color;
color: $text-color;
border-radius: $border-radius;
border: $outer-border;

tr {
border: $cell-border;
&:nth-child(odd) { // highlight the odd rows with a color
background-color: $highlight-color;
}
}

th {
display: none; // hide all the table header for mobile
border: $header-border;
background-color: $header-background-color;
color: $header-text-color;
padding: 1em;
&:first-child { // show the first table header for mobile
display: table-cell;
text-align: center;
}
&:nth-child(2) { // show the second table header but replace the content with the data-th from the markup for mobile
display: table-cell;
span {display:none;}
&:after {content:attr(data-th);}
}
@media (min-width: $breakpoint) {
&:nth-child(2) { // hide the data-th and show the normal header for tablet and desktop
span {display: block;}
&:after {display: none;}
}
}
}

td {
display: block; // display the table data as one block for mobile
word-wrap: break-word;
max-width: 7em;
&:first-child {
display: table-cell; // display the first one as a table cell (radio button) for mobile
text-align: center;
border-right: $cell-border;
}
@media (min-width: $breakpoint) {
border: $cell-border;
}
}

th, td {
text-align: left;
margin: .5em 1em;
@media (min-width: $breakpoint) {
display: table-cell; // show the table as a normal table for tablet and desktop
padding: 1em;
}
}
}
}

// Include the mixin (with extra options as overrides)

@include responstable(
$border-radius: $table-border-radius,
$highlight-color: $table-highlight-color,
$header-background-color: $table-header-background-color,
$header-text-color: $table-header-text-color,
$header-border: $table-header-border);

// General styles

body {
padding: 0 2em;
font-family: Arial, sans-serif;
color: #024457;
background: #f2f2f2;
}

h1 {
font-family: Verdana;
font-weight: normal;
color: #024457;
span {color: #167F92;}
}



اگه راهنمایی کنید ممنون میشم