Как лучше всего устанавливать размер <table>?

Question

Я хочу узнать, как лучше установить размер таблицы - ширину - чтобы содержимое в ячейках не выходило за пределы таблицы (особенно по горизонтали), но было вынуждено оставаться в ячейках.

Нужно ли устанавливать ширину, высоту на уровне элемента <table> или я должен сделать это для элементов <tr> и <td>?

Например, эта таблица:

<table>
        <tr >
            <td>
                Name
            </td>
            <td>
                Mr.Tuber
            </td>
        </tr>

        <tr >
            <td>
                Surname
            </td>
            <td>
                Tupova
            </td>
        </tr>
</table>

Answer 1

Содержимое ячейки никогда не будет выходить за пределы таблиц, пока вы помещаете текст в ячейки.

Хороший способ создать такую ​​таблицу - установить общий размер таблицы., а также ширины столбцов, используя CSS.Позвольте таблице расширяться вертикально, чтобы вместить содержимое автоматически.

<table class="table1">
        <tr>
            <td class="col1">
                Name
            </td>
            <td class="col2">
                Mr.Tuber
            </td>
        </tr>

        <tr>
            <td>
                Surname
            </td>
            <td>
                Tupova
            </td>
        </tr>
</table>

CSS:

table.table1 {
     width:500px
}

table1 .col1 {
     width:200px
}

Вам не нужно специально устанавливать col2, так как он будет занимать все пространство, если его оставить,Возможно, вы также захотите использовать TH вместо TD для ячеек заголовка, чтобы вы могли оформлять их по-другому, чем ячейки содержимого.

.table1 th { ... }