Chart in HTML CSS, Astrological chart Options

[sujatha]

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.

[sujatha]

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;
}}

[pandy]

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...

I meant I wanted to actually see the content. But I googled and know now it's just text, and horizontal at that. At least the charts I found looked like that.

[Christian J]

I'm still not sure of the structural/semantic meaning of the rhombuses/triangles in the Astrological Chart. But if the diagonal lines are mostly decorational, maybe you could just create them with a single background image (using CSS background-size to fit the container)? But you'd still need to place the text's HTML elements between the lines with CSS, which might be fragile of course.

[coothead]

I'm still not sure of the structural/semantic meaning of the rhombuses/triangles in the
Astrological Chart. But if the diagonal lines are mostly decorational, maybe you could
just create them with a single background image (using CSS background-size to fit the
container)? But you'd still need to place the text's HTML elements between the lines
with CSS, which might be fragile of course.

As Jason Knight pointed out here...

https://forums.htmlhelp.com/index.php?s=&am...st&p=146708

...that SVG was a reasonable way to go, and as I fully trust his judgement in these
matters, I went straight ahead and provided a coded example.

As far as I can see my example works perfectly well.

What I cannot see, though, is why you keep on beefing about it.

coothead