Поместите изображение и таблицу рядом с HTML с соотношением 50-50

Question

Поместите изображение и таблицу рядом с HTML с соотношением 50-50

0

Я хотел бы уточнить, есть ли способ разместить изображение с левой стороны, в то время как таблица HTML в правой части страницы. Т.е. эти два должны существовать бок о бок в соотношении 50-50.

В настоящее время я создаю jFreeChart и помещаю его как изображение в html файл. (см. img_1 ниже)

Отдельно я генерирую таблицу html со значениями (см. Таблицу_1 ниже). Код, который я использую сейчас, чтобы разместить эти бок о бок, выглядит следующим образом (он выполняет эту работу, но соотношение не 50-50.. как я могу это обеспечить?)

PS: Я пробовал div, но, похоже, это не работает для меня. Мой код перестает работать. Поэтому я публикую, что работает до этого момента.

<tr>
    <td width="51">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="font-size:16px;color: #00386b; font-weight:bold; text-align:left">
        TITLE
    </td>
    <td width="5">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="font-size:16px;color: #00386b; font-weight:bold; text-align:left">
        TITLE
    </td>
    <td width="25">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
</tr>
<!-- start spacer row -->
<tr>
    <td height="15" colspan="5">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
</tr>
<!-- end spacer row -->
<tr>  
    <td width="51">  ---LEFT SIDE
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="text-align:center; vertical-align:top">

        <img SRC="cid:img_1" width="250" height="250" border="0">

    </td>
    <td width="5">  -RIGHT SIDE
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
    <td style="text-align:left; vertical-align:top">

        TABLE_1

    </td>
    <td width="25">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>

    <td width="25">
        <img src="spacer.gif" width="1" height="1" border="0">
    </td>
</tr>
</tr>

stretchr 17 март 2014, в 09:40

Источник

Теги:

html

html-table

image

alignment

spacing

1 ответ

Ещё вопросы

Gaurang Tandon · Accepted Answer · 2014-03-17T05-58-00.000Z

Вы можете использовать width:50%, например:

#one{
    width:50%;
    float:left;
    height:100px;
}

#two{
    width:50%;
    float:left;
    height:100px;
}

td, tr, table{
    border:1px solid black; // visual
    text-align:center; // text also centered, if required
}

демонстрация

Он также реагирует, поэтому он корректирует размер окна.

спасибо, как мне интегрировать ваши ответы с моим текущим кодом?
Я использовал table s в своем коде, так что это должно быть легко реализовать в вашем коде, не так ли? Кстати, если бы вы могли прокомментировать в своем коде, какие области идут вместе, это было бы здорово. Это трудно понять из вашего текущего кода.