Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Junior Member
    Join Date
    Aug 2004
    Posts
    13
    Member #
    7044
    Hi everyone,

    I am having a little problem. I want to have a big table as part of
    my website it needs to be about 25-30 columns wide. In order to do
    this without the need to scroll, and therefore loose the info on the
    left, I am trying to write text vertically.

    I have figured out how to do this using CSS, but when I try to
    transfer it to the top row of my table, it doesn't work.

    Can anyone tell me how I can do this?

    This is as far as I've got:

    Code:
    <head>
    <style type="text/css">
    .verticaltext{
    font: 10px arial;
    position: relative;
    left:100px;
    right: 0px;
    top: 20px;
    width: 1px;
    writing-mode: tb-rl;
    }
    </style>
    </head>
    <body>
    <DIV style="position: absolute; top:200px; left:10px; width:200px;
    height:25px">
    <TABLE WIDTH="90%" CELLSPACING="1" CELLPADDING="4" BORDER="1">
    <TR>
    <TD>A</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD>
    <TD>7</TD>
    <TD>8</TD>
    <TD>9</TD>
    <TD>10</TD>
    
    <TD>11</TD>
    <TD>12</TD>
    <TD>13</TD>
    <TD>14</TD>
    <TD>15</TD>
    <TD>16</TD>
    <TD>17</TD>
    <TD>18</TD>
    <TD>19</TD>
    <TD>20</TD>
    
    <TD>21</TD>
    <TD>22</TD>
    <TD>23</TD>
    <TD>24</TD>
    <TD>25</TD>
    </TR>
    <TR>
    
    <TD>26</TD>
    <TD>27</TD>
    <TD>28</TD>
    <TD>29</TD>
    <TD>30</TD>
    
    <TD>31</TD>
    <TD>32</TD>
    <TD>33</TD>
    <TD>34</TD>
    <TD>35</TD>
    <TD>36</TD>
    <TD>37</TD>
    <TD>38</TD>
    <TD>39</TD>
    <TD>40</TD>
    
    <TD>41</TD>
    <TD>42</TD>
    <TD>43</TD>
    <TD>44</TD>
    <TD>45</TD>
    <TD>46</TD>
    <TD>47</TD>
    <TD>48</TD>
    <TD>49</TD>
    <TD>50</TD>
    </TR>
    <TR>
    <TD>51</TD>
    <TD>52</TD>
    <TD>53</TD>
    <TD>54</TD>
    <TD>55</TD>
    <TD>56</TD>
    <TD>57</TD>
    <TD>58</TD>
    <TD>59</TD>
    <TD>60</TD>
    
    <TD>61</TD>
    <TD>62</TD>
    <TD>63</TD>
    <TD>64</TD>
    <TD>65</TD>
    <TD>66</TD>
    <TD>67</TD>
    <TD>68</TD>
    <TD>69</TD>
    <TD>70</TD>
    
    <TD>71</TD>
    <TD>72</TD>
    <TD>73</TD>
    <TD>74</TD>
    <TD>75</TD>
    </TR>
    <TR>
    <TD>76</TD>
    <TD>77</TD>
    <TD>78</TD>
    <TD>79</TD>
    <TD>80</TD>
    
    <TD>81</TD>
    <TD>82</TD>
    <TD>83</TD>
    <TD>84</TD>
    <TD>85</TD>
    <TD>86</TD>
    <TD>87</TD>
    <TD>88</TD>
    <TD>89</TD>
    <TD>90</TD>
    
    <TD>91</TD>
    <TD>92</TD>
    <TD>93</TD>
    <TD>94</TD>
    <TD>95</TD>
    <TD>96</TD>
    <TD>97</TD>
    <TD>98</TD>
    <TD>99</TD>
    <TD>100</TD>
    </TR>
    <TR>
    <TD>101</TD>
    <TD>102</TD>
    <TD>103</TD>
    <TD>104</TD>
    <TD>105</TD>
    <TD>106</TD>
    <TD>107</TD>
    <TD>108</TD>
    <TD>109</TD>
    <TD>110</TD>
    
    <TD>111</TD>
    <TD>112</TD>
    <TD>113</TD>
    <TD>114</TD>
    <TD>115</TD>
    <TD>116</TD>
    <TD>117</TD>
    <TD>118</TD>
    <TD>119</TD>
    <TD>120</TD>
    
    <TD>121</TD>
    <TD>122</TD>
    <TD>123</TD>
    <TD>124</TD>
    <TD>125</TD>
    </TABLE>
    
    <script type="text/javascript">
    
    var myverticaltext='<div class="verticaltext">Followed by so
    that,<br>subject and verb<br>Followed by so that, subject<br>and verb
    in any tense<br>Indirect Questions<br>Verbs linked by
    and<br>Reporting verbs followed<br>by the object, optional
    that,<br>subject and verb in any tense<br>Reporting verbs
    followed<br>by optional that, subject<br>and verb in any
    tense<br>Reporting verbs followed<br>by compulsory that,
    subject<br>and verb in any tense<br>Followed by question word,<br>to
    and the infinitive<br>Followed by object, question<br>word, subject
    and verb<br>Followed by a reflexive pronoun,<br>to and the
    infinitive<br>Followed by a reflexive<br>pronoun and
    gerund<br>Followed by a possessive<br>adjective and
    gerund<br>Followed by the<br>object and gerund<br>Followed by a
    reflexive pronoun,<br>to and the infinitive<br>Followed by the
    object<br>and the past participle<br>Followed by the<br>past
    participle<br>Past Subjunctive<br>Present Subjunctive<br>Followed by
    a gerund<br>Followed by to<br>and the infinitive<br>Followed by the
    object<br>to and infinitive<br>Followed by the object<br>and bare
    infinitive<br>Non-modals Followed by<br>the bare
    infinitive<br>Modals - Followed by<br>the bare
    infinitive<br>Auxiliaries Followed by<br>the bare
    infinitive<br></a></div>'
    var bodycache=document.body
    if (bodycache && bodycache.currentStyle &&
    bodycache.currentStyle.writingMode)
    document.write(myverticaltext)
    </script>
    <DIV style="position: absolute; top:200px; left:10px; width:200px;
    height:25px">
    <b>A</b><br>
    accuse<br>
    adapt to<br>
    adjust to<br>
    admit to<br>
    adore<br>
    advise<br>
    advocate<br>
    aim<br>
    allege<br>
    allow<br>
    appologise for<br>
    appreciate<br>
    approve of<br>
    argue<br>
    argue about<br>
    arrange<br>
    ask about<br>
    aspire<br>
    assure<br>
    attempt<br>
    avoid<br>
    </DIV>
    </body>

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    I really don't follow what you're trying to do, and it sounds like more work that it's worth. Vertical text? I don't know about that. If that's what it takes, you might consider saving yourself some time and trying a new layout. Keep in mind, layouts are created to fit the content, not the other way around.

  4. #3
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    It's cake:
    http://www.webdesignforums.net/showt...light=vertical

    <div style="layout-flow: vertical-ideographic"></div>

    However, only IE supports this particular way.
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  5. #4
    Junior Member
    Join Date
    Aug 2004
    Posts
    13
    Member #
    7044
    Wow Wired, I am truely impressed. Thank you very much indeed this is exactly what I needed. I thought this was going to be a very complex problem. I've tried it and it works in a table so when I figure out the row height, etc, I should be able to do my tables of English verb patterns. It even works with <font size>, <br> and <p>!!!

    One thing I can't understand, though. If it's that simple, why is dynamic drive producing reams and reams of code that has to go in both the header and body?

  6. #5
    Member
    Join Date
    Aug 2004
    Location
    Ohio
    Posts
    47
    Member #
    7210
    One thing I can't understand, though. If it's that simple, why is dynamic drive producing reams and reams of code that has to go in both the header and body?
    Because no sane web developer would want a solution that only works in Internet Explorer, unless for some reason you want to alienate 10% of your target audience.

  7. #6
    Junior Member
    Join Date
    Aug 2004
    Posts
    13
    Member #
    7044
    Fair comment usurper, but my original post mentioned that it is not easy to use this code in an html table. I don't know that it is impossible, but I can't figure out how. Now I can see how to use the code that wired showed me in an html table, and I am probably going to have to alienate 10% of visitors to my site (not that many visit anyway.) Personally, I can't think of a useful application of vertical text except at the top of tables and the axes of graphs. So in fact they are alienating me.

  8. #7
    Member
    Join Date
    Aug 2004
    Location
    Ohio
    Posts
    47
    Member #
    7210
    Was curious, are you opposed to scrolling because the entire dataset needs to be viewed at once, or because the row names need to remain at the left of the screen? If it's the latter, I'm sure there's a number of workarounds.

  9. #8
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    Quote Originally Posted by Andy Patterson
    Wow Wired, I am truely impressed. Thank you very much indeed this is exactly what I needed. I thought this was going to be a very complex problem. I've tried it and it works in a table so when I figure out the row height, etc, I should be able to do my tables of English verb patterns. It even works with <font size>, <br> and <p>!!!

    One thing I can't understand, though. If it's that simple, why is dynamic drive producing reams and reams of code that has to go in both the header and body?
    No problemo! Took a while to find the first time when I posted it here. What's dynamic drive?
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  10. #9
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  11. #10
    Junior Member
    Join Date
    Aug 2004
    Posts
    13
    Member #
    7044
    Oh, I posted sth, but it doesn't seem to have come out.
    Usurper, I have decided to use Wired's code the best thing I can do is show you what I've used the code for:
    http://www.geocities.com/endipatterson/bigtableA.html
    It's part of a larger website:
    http://www.geocities.com/endipatterson/Catenative.html

    Wired, it seems that justlivyalife beat me to to it, dynamic drive is a script depository. They've got some good stuff. Check it out. It's where I got the original CSS code for vertical text.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

how to write vertically in html table

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:57 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com