Anyone can help me as i am trying to add a background to the existing table code

Anyone can help me as i am trying to add a background to the existing table code
0

#1

CSS

<style type="text/css">

	table.tableizer-table {
		font-size: 12px;
		border: 1px solid #CCC; 
		font-family: Arial, Helvetica, sans-serif;
	} 
	.tableizer-table td {
		padding: 1px;
		margin: 3px;
		border: 1px solid #CCC;
	}
	.tableizer-table th {
               background-color: #1E90FF;
               color: #FFF;
	       font-weight: bold;
	}
</style>

HTML

<table style="width:100%">
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th>Fast moving Toner Model </th><th>Compatible Printer model </th><th>Saving (%)</th><th>Est. Annual saving (RM)</th></tr></thead><tbody>
 <tr><td>CE285A</td><td>HP LaserJet P1102, M1132, M1212, M1214, M1217, M1130/1136/1210MFP, M1212NF</td><td>38%</td><td>622.8</td></tr>
 <tr><td>CB435A</td><td>HP LaserJet P1005/P1006/1009 ; Canon LBP 3050/3100/3150</td><td>40%</td><td>643.5</td></tr>
 <tr><td>Q2612A</td><td>HP LaserJet 1010/1012/1015/1018/1020/1022series/3015/3020/3030mfp/3050/3052/ 3055/M1005/M1319f mfp ; Canon LBP 2900/3000</td><td>54%</td><td>995.1</td></tr>
 <tr><td>Q2612X</td><td>HP LaserJet 1010/1012/1015/1018/1020/1022series/3015/3020/3030mfp/3050/3052/ 3055/M1005/M1319f mfp ; Canon LBP 2900/3000</td><td>35%</td><td>577.8</td></tr>
 <tr><td>CF283A</td><td>HP LaserJet Pro MFP M125 series/M127 series/126/128</td><td>30%</td><td>423</td></tr>
 <tr><td>CE278A</td><td>HP LaserJet P1566, P1560/P1606, P1600/M1536 mfp / Canon LBP-6200</td><td>42%</td><td>783.9</td></tr>
 <tr><td>CE320A</td><td>HP LaserJet  CM1415/CP1525</td><td>30%</td><td>433.74</td></tr>
 <tr><td>CE321A</td><td>HP LaserJet  CM1415/CP1525</td><td>33%</td><td>536.64</td></tr>
 <tr><td>CE322A</td><td>HP LaserJet  CM1415/CP1525</td><td>33%</td><td>536.64</td></tr>
 <tr><td>CE323A </td><td>HP LaserJet  CM1415/CP1525</td><td>33%</td><td>536.64</td></tr>
 <tr><td>CF280A</td><td>HP LaserJet 400 /M401dn/ M401d/ M401n/ M425DN /M425DW</td><td>38%</td><td>941.58</td></tr>
 <tr><td>CE310A</td><td>HP CP1025, MFP M175 / M275 ; Canon LBP 7010C / 7018C</td><td>31%</td><td>377.16</td></tr>
 <tr><td>CE311A</td><td>HP CP1025, MFP M175 / M275 ; Canon LBP 7010C / 7018C</td><td>30%</td><td>284.28</td></tr>
 <tr><td>CE312A</td><td>HP CP1025, MFP M175 / M275 ; Canon LBP 7010C / 7018C</td><td>30%</td><td>284.28</td></tr>
 <tr><td>CE313A</td><td>HP CP1025, MFP M175 / M275 ; Canon LBP 7010C / 7018C</td><td>30%</td><td>284.28</td></tr>
 <tr><td>CE314A</td><td>HP CP1025, MFP M175 / M275 ; Canon LBP 7010C / 7018C</td><td>30%</td><td>587.04</td></tr>
 <tr><td>3500B002 </td><td>Canon I-Sensys Fax L 150/ L 170/  L 410, MF4410/4430/4450/4550D/4570DN/4570dw/4580DN/4730/4750/4770n/4780w/4820w/4870dn/4880dw/4890 dw</td><td>39%</td><td>773.7</td></tr>
 <tr><td>TN-2220</td><td>HL-2240D, 2250DN, 2270DW/DCP-7055, 7060D/ MFC-7360, 7860DW/ FAX2840</td><td>42%</td><td>721.5</td></tr>
 <tr><td>TN-2120</td><td>HL 2140, 2170W, MFC 7340/ 7450/ 7840N, DCP 7030/ 7040</td><td>54%</td><td>1025.1</td></tr>
 <tr><td>TN-2320</td><td>HL-L2320D/L2360DN/ L2365DW, DCP-L2520D/ L2540DW, MFC-L2700D/ L2700DW/ L2740DW</td><td>53%</td><td>1247.58</td></tr>
</tbody></table>

#2

If you have not figured it out yet, can you provide a codepen to the proj.?


#3

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

What kind of background are you trying to add (image or color)? What element are you trying to add it to?


#4

Hi Sujith,

I have figured out how to do it. Thanks!


#5

I want to add an image with url link and i have figure another way to do it.