Как создать таблицу с простой рамкой в HTML 5

Что является самым простым способом получить такую таблицу, как ниже, в HTML 5. У меня такое чувство, что мое решение (с настройкой стиля для каждого td) - не лучший способ.Как создать таблицу с простой рамкой в HTML 5

<table style="border-collapse: collapse; border: 1px solid;"> 
 
    <tr> 
 
    <td style="border: 1px solid;">1</td> 
 
    <td style="border: 1px solid;">2</td> 
 
    </tr> 
 
    <tr> 
 
    <td style="border: 1px solid;">3</td> 
 
    <td style="border: 1px solid;">4</td> 
 
    </tr> 
 
</table>

источник

2015-09-09 Paweł Adamski

использование CSS селекторы – MoLow

Я надеялся, что есть что-то вроде атрибута границы в HTML 4. Но нам, я вижу, что нужно использовать CSS. –

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

Во-первых, дать таблицу id так:

<table id="thetable" border="1"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
</table>

Затем использовать CSS на столе:

#thetable { 
    border-collapse: collapse; 
    border: 1px solid; 
} 

#thetable td { 
    border: 1px solid; 
}

Весь HTML документ будет выглядеть примерно так:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Table Page</title> 
    <style> 
    #thetable { 
     border-collapse: collapse; 
     border: 1px solid; 
    } 

    #thetable td { 
     border: 1px solid; 
    } 
    </style> 
    </head> 
    <body> 
    <table id="thetable" border="1"> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>4</td> 
     </tr> 
    </table> 
    </body> 
</html>

Here is a tutorial о том, как получить CSS в свой HTML, используя таблицу стилей. Удачи!

источник

2015-09-09 19:25:24

Используйте классы CSS.

table.MyClass { 
 
    /* Whatever table styles here */ 
 
    border-collapse: collapse; 
 
    border: 1px solid; 
 
} 
 
table.MyClass td { 
 
    /* Whatever cell styles within the table here */ 
 
    border: 1px solid; 
 
}

<table class="MyClass"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>

источник

2015-09-09 19:26:34

экспортирования КСС в отдельную таблицу стилей.

table { 
 
    border-collapse: collapse; 
 
    border: 1px solid; 
 
} 
 
td { 
 
    border: 1px solid red; 
 
}

<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>

источник

2015-09-09 19:28:01

Как создать таблицу с простой рамкой в ​​HTML 5

ответ

Смежные вопросы

Как создать таблицу с простой рамкой в HTML 5