Chart in HTML CSS, Astrological chart |
Chart in HTML CSS, Astrological chart |
sujatha |
Nov 18 2023, 09:27 AM
Post
#1
|
Group: Members Posts: 4 Joined: 18-November 23 Member No.: 29,091 |
I want to make chart using html css design, I have attached design I tried table, tr, td, it didn't work since it is combination of square and triangle. Is there any way to make this design happen? After this code design, i will take care of value passing to all squares and triangles. I need just that diagram code or support. Thanks for your support.
Attached thumbnail(s) |
sujatha |
Nov 21 2023, 07:51 AM
Post
#2
|
Group: Members Posts: 4 Joined: 18-November 23 Member No.: 29,091 |
Thank you so much for all your support putting together. I am sending code for south indian chart as you are interested, i may change height width later with little updates...
#######HTML ########## <h4>South Indian Chart</h4> <table className="tableA"> <tr> <td id='Pi'>{PiVal}</td><td id='Ar'>{ArVal}</td><td id='Ta'>{TaVal}</td><td id='Ge'>{GeVal}</td> </tr> <tr> <td id='Aq'>{AqVal}</td><td className="col">Rasi Chart</td><td></td><td id='Ca'>{CnVal}</td> </tr> <tr> <td id='Ca'>{CpVal}</td><td></td><td className="col1"></td><td id='Le'>{LeVal}</td> </tr> <tr> <td id='Sa'>{SgVal}</td><td id='Sc'>{ScVal}</td><td id='Li'>{LiVal}</td><td id='Vi'>{ViVal}</td> </tr> </table> ########### CSS########### .col { border-right: hidden; border-bottom: hidden; } .col1 { border-left: hidden; border-top: hidden; } .tableA { border-collapse: collapse; /* border: 2px solid #ff4d00;*/ background-color:rgb(244, 244, 216); inline-size: 2px solid; height: 400px; width: 600px; margin-left: 10%; &td, th, tr{ border: 1px solid #402cef; text-align: center; table-layout: left; font-size: 15px; }} |
Lo-Fi Version | Time is now: 25th June 2024 - 09:51 AM |