How to use a responsive table in blogger /blogger main mobile Phone ki Specification Table kis trhan banate hain

 

Assalam-O-Alaikum
Dear friends aaj ke is blog me main Aap logon ko btaon ga ke Aap kis trhan blogger website par responsive table add kr sakte hain.

1.How to use a responsive table in blogger

Acha phale me Aap ko yeh clear kr don ke Aap Ne wo use kis wjhan se karne Hain.
Agr Aap apni blogger website main mobile phone ke bare main ya Aap jobs ke bare main post likhte Hain tab Aap ko is ki zarort hai.
Blogger par wo sare Feature majod nhi Hain Jase WordPress site par chezen (plug resume)
Hote Hain blogger main Aap ko bhot ziyada mhant krna ho gi jis Se Aap ke blogger website ki lok bhi wesi he dikhi jis trhan WordPress site par show Hoti Hain aaj ki is post main to main Aap ko responsive table ke bare main Bata rha hon Aap mere blog ko follow kar len kiyonke main is website par blogger ke related post publish krta rhta hon.

2. How to add responsive table css code in blogger.

Blogger main responsive table add krne ke Liye Aap Ne Sab se phle apni blog site open kar Leni hai.
Us ke bad Aap Ne blogger ke dashboard par aa Jana hai dashboard par ane ke bad Aap Ne theme wale Section par click kar Dena hai.
Us ke bad Aap ke pas 1 chota sa menu open ho ga is me Aap Ne edit to html ke oper click kar Dena hai agr Aap laptop ya PC computer se open kar Rahe Hain to Aap Ne theme ka section open Hoga us ke andar khen bhi click kar Dena hai click krne ke bad Aap Ne Apne keyboard se  (control+ F) ka baton pres krna hai for windows user.
Aor agr apple MacBook ka use Karte Hain to Aap Ne (CMD+F) click kar Dena hai.

coding wale section ke top par search karne ke Liye 1 choti si bar open ho gi us main Aap Ne is code ko past krna hai.
</b:skin>
aor enter ka button pres kar Dena hai.
Phr Aap Ne </b:skin> ke oper is code ko past krna hai is ko Aap apni Marzi Se adjust kar sakte Hain.
👇

/* Phone Specification Table by www.ji4you.com */ .post-body table {width:100%;} .post-body table td, .post-body table caption{border:2px solid #121010;padding:10px;text-align:left;vertical-align:top;} .post-body table th {border:2px solid #121010;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #eee;} .post-body th{font-weight:700;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #121010;} .post-body th{background:#e88e07; color:#181818;} .post-body th:hover{background:#d12a3b;} .post-body td a{color:#b52b39;} .post-body td a:hover{color:#FEFEFE;} .post-body table.tr-caption-container td {border:none;padding:8px;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body td.tr-caption {color:#181818;font-size:80%;padding:0px 8px 8px !important;}

Code ko paste krne ke bad Aap Ne save kar Dena hai theme ko aor  wapis aa Jana hai dashboard par whan se Aap Ne post wale option par click krna hai aor whan par Aap Ne new post ke oper click kar Dena hai hai agr aap Ne us blog site par phle bhi koi post submit ki hoi hai to Aap us ko bhi edit kar sakte Hain.
Post wale option main ane ke bad Aap Ne compos to html ke oper click kar Dena hai aor Apni us post main agr Aap koi photo lgana chate Hain to us main photo ko add kar len.
Us ke bad Aap Ne is code ko us photo ke niche past kar Dena hai.
Is code main Aap apni Marzi Se Kuch bhi change kar sakte Hain

👇

<table class="full"> <tbody> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;"> Infinix Note 30 Specification</span></th></tr> </tbody> <tbody> <tr> <td width="35%">Sim support</td> <td>Hybrid Dual SIM (Nano-SIM, dual stand-by)</td></tr> <tr> <th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">OS, And Processor </span></th> </tr> <tr> <td width="35%">OS</td> <td>Android 13 OS</td> </tr> <tr> <td width="35%">CPU</td><td><span style="text-align: justify;">Octa-core (2 x 2.2 GHz Cortex-A76 + 6 x 2.0 GHz Cortex-A55)</span></td> </tr> <tr><td>Chipset</td> <td>Mediatek MT8781 Helio G99 (6nm)</td></tr> <tr><td>GPU</td> <td>Mali-G57 MC2</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Body</span></th></tr> <tr> <td width="35%">Dimensions</td> <td> 168.6 x 76.6 x 8.58 mm</td></tr> <tr> <td width="35%">Weight</td> <td> 219 Grams</td> </tr> <tr> <td width="35%">Colors</td> <td>Obsidian Black, Interstellar Blue, Sunset Gold</td> </tr> <tr> <th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Display</span></th> </tr> <tr> <td width="35%">Type</td> <td> IPS LCD, 120Hz, 580 nits (peak)</td> </tr> <tr><td width="35%">Screen Size</td> <td>6.78 Inches</td></tr> <tr><td width="35%">Resolution</td> <td>1080 x 2460 pixels</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Memory</span></th></tr> <tr><td>Card slot</td><td> Support Up To 2 TB</td></tr> <tr><td width="35%">Internal</td><td>128/256 GB</td></tr> <tr><td>RAM</td><td> 8 GB RAM</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;"> Camera📸</span></th></tr> <tr><td width="35%">Back</td> <td> Triple Camera: 64 MP, f/1.7, (wide), 1/2", PDAF + 2 MP, f/2.4, (depth) + QVGA</td></tr> <tr><td width="35%">Features</td> <td> Phase detection, Geo-tagging, Panorama, HDR, LED Flash </td></tr> <tr> <td>Video</td> <td>Video (1440p@30fps, 1080p@30/60fps)</td></tr> <tr> <td width="35%">SELFIE CAMERA</td> <td> 16 Megapixels </td></tr> <tr><td width="35%">Features</td> <td> , f/2.0, (wide), LED flash, HDR</td></tr> <tr><td>Video</td> <td> Video (1080p 30fps)</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Connectivity</span></th></tr> <tr> <td width="35%">WLAN</td> <td>yes Wi-Fi 802.11 a/b/g/n/ac, dual-band, Wi-Fi Direct</td></tr> <tr><td width="35%">Bluetooth</td> <td>Yes, v5.1 with A2DP, LE </td></tr> <tr> <td width="35%"> GPS</td> <td> Yes + A-GPS support</td></tr> <tr> </tr><tr> <td width="35%">NFC</td> <td>Yes</td></tr> <tr> <td width="35%">USB</td> <td>USB Type-C 2.0, OTG</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Features</span></th></tr> <tr> <td width="35%">Sensors</td> <td>Accelerometer, Compass, Fingerprint (side mounted), Gyro, Proximity</td></tr> <tr><td width="35%">Torch</td><td>Yes</td></tr> <tr><td width="35%"> Browser</td><td>HTML5</td></tr> <tr><td>Extra</td> <td>NFC, (market/region dependent) Glass front, plastic frame, glass or leather back, Photo/video editor, Document viewer</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;"> Multimedia</span></th></tr> <tr><td width="35%">Music play</td><td>Yes</td></tr> <tr><td width="35%"> Radio</td><td>FM radio</td></tr> <tr><td width="35%">Alert types</td><td>Vibration, MP3,ringtones</td></tr> <tr><td width="35%">Loudspeaker</td><td>Yes Dual Speaker, Tuned by JBL</td></tr> <tr><td>3.5mm jack</td><td>Yes</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Battery and Power</span></th></tr> <tr><td>Type</td><td> (Li-Po Non removable), 5000 mAh</td></tr> <tr><td>Fast charging</td><td> Fast charging 45W wired</td></tr> <tr bgcolor="#ffffff" class="config_table"></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Releasing Date</span></th></tr> <tr><td width="35%">Announced</td> <td>22-05-2023</td></tr> <tr><td>Status</td><td>Available Market</td></tr> <tr bgcolor="#ffffff" class="config_table"></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Expected Price</span></th></tr> <tr><td width="35%">USD</td><td>$196</td></tr> <tr><td width="35%">Pakistan</td><td>Rs.58,399</td></tr> </tbody></table>

Main umeed krta hon ke Aap ko is blog se zaror Kuch na Kuch hasil Howa ho ga agar 

Mera blog Aap ko acha lag Raha hai to is zaror shear kren Apne friends ke Sath agr Aap ke man main koi blogging ke related swal hai to Aap comment kar ke poch sakte hain.