频率图像从表格中心开始 [家庭作业] [Javascript]答案

【问题标题】：Frequency Images start in the center of table [Homework] [Javascript]频率图像从表格中心开始 [家庭作业] [Javascript]
【发布时间】：2016-02-19 13:47:39
【问题描述】：

嗨，我必须为添加的单词中的每个字母创建一个频率图表。我已经创建了它，但是您可以从这张图片中理解一个小错误：

是的，如果字母不是 100 像素，它出于某种原因从中间开始。我希望它从 td 的底部而不是中间开始。

这是创建表格的代码

function generateTable(input) {
    var frequency = new Array(26);
    var letters = new Array(26);
    var freqPos = 0;
    var newInput = input.toUpperCase();
    var max = 0;
    var myHeight = 0;
    var test = 9000;
    var image = new Image();
    image.src = "orange.gif";
    for (i = 65; i < 91; i++) {
        //looks at how many times each character occurs and stores its value
        frequency[freqPos] = newInput.split(String.fromCharCode(i)).length -
            1;
        freqPos++;
    }
    //checks which letter occured the most
    for (i = 0; i < frequency.length - 1; i++) {
        if (frequency[i] > max) {
            max = frequency[i];
        }
    }

    table = input + "<table border='1'>";
    //first row 
    table += "<tr>";
    table += "<td>Letter Frequency 100px</td>";
    for (i = 0; i < frequency.length; i++) {
        //somehow have to use myHeight to change the height of the image that I make here. 
        myHeight = (frequency[i] / max) * 100;
        myHeight = parseInt(myHeight, 10);
        //document.write(i + ": " + myHeight + "<br \>");
        table += '<td height = "100" width = "8"><img src = "orange.gif" id = "orange" alt = "25" height = "'+myHeight+'" width = "8"></td>';
    }
    table += "</tr>";
    //second row
    table += "<tr>";
    table += "<td></td>";
    for (i = 65; i < 91; i++) {
        table += "<td>" + String.fromCharCode(i) + "</td>";
    }
    table += "</tr>";
    table += "</table>";
    return table;
}

试图弄清楚为什么这些从中间开始以及如何将其与单元格底部对齐。

【问题讨论】：

在未来最好包括这样的问题，因为需要几个步骤来复制并且高度上下文因此很难提供经过验证的解决方案。这是我制作的小提琴中的问题：jsfiddle.net/dabros/vLb1xayx。也可能远离图像并在被调整大小的元素上设置background-color（这很容易成为td内的一个div）

标签： javascript html normalization frequency

【解决方案1】：

也许你可以通过使用 align 来解决这个问题。

<img align="left|right|middle|top|bottom">.

我猜它可以与 <img align="bottom"> 一起使用

【讨论】：

【解决方案2】：

使用 CSS：

td{
  vertical-align:top; horizontal-align:left; padding:0;
}

【讨论】：