2016-11-30 2 views
0

Я пытаюсь скопировать часть части справочника Staff этой страницы с CSS, Javascript и HTML в HTML. Самое главное, мне бы хотелось, чтобы я мог просто сделать таблицу, как вы видите здесь, только нижние границы/разделители (или то, что они называются) для каждой строки. Как мне это сделать?Создать таблицу с нижней границей в HTML

http://sps.columbia.edu/about/staff-directory

Спасибо!

Edit:

Мне нужен только HTML, CSS нет пожалуйста. Однако, спасибо!

+0

Я хотел бы предложить вам первый проверить код/​​CSS в каталоге персонала, который вы пытаетесь скопировать и посмотреть, как сделай это. Затем попробуйте свои силы в решении. Если вы все еще застряли, разместите свой код здесь, и мы можем вам помочь. – haltersweb

+0

Спасибо за вашу помощь, но мне это нужно только в HTML. Я не могу использовать CSS или ничего, кроме HTML. – Lorber

+0

Можете ли вы использовать встроенные стили в своем HTML? – haltersweb

ответ

3

Просто используйте следующий код-фрагмент и вставить его в вас style.css

tr { 
border-bottom: 1px solid #ccc; 
} 

Без использования style.css

<table> 
    <tr style="border-bottom: 1px solid red"> 
    <td>Table Cell</td> 
    </tr> 
</table> 
+0

Спасибо за вашу помощь, но мне это нужно только в HTML. Я не могу использовать CSS или ничего, кроме HTML. – Lorber

+0

просто добавил версию html. – Martin2904

1

Я считаю, что вы хотите удалить границу из таблицы. directory tr и добавьте его в элемент tbody.

Это даст вам границу между каждой секцией.

+0

А я думаю, что здесь я не понимаю, но мне просто нужны серые линии, расположенные ниже каждой строки текста в таблице. Кажется, я не могу воссоздать его в HTML, только регулярные, все стороны строки, помещенной в таблицы. Вы знаете, как это сделать? – Lorber

+0

вы можете вставить изображение разделителя между каждой строкой: – bytanyar

+0

Вы хотите горизонтальное правило между строками? Например: – bytanyar

1

вы могли бы использовать этот

<table style="border-bottom: 1px solid black"> 
 
    <tr> 
 
       <td>Someone</td> 
 
     </tr> 
 
    </table>

+0

Хм, я вижу, что он работает здесь, в фрагменте кода, и я ценю это.Но когда я пытаюсь выразить это в контексте кода, это ничего не меняет. Это все еще обычный стол, со всех сторон. Есть предположения? – Lorber

+0

Хмм, это должно измениться и в контексте кода –

+0

Я пробовал даже отправлять ваш точный код за пределы всего остального, и это просто обычная табличная коробка. – Lorber

1

Вот чистый HTML версия с встроенными стилями.

стили Уведомление, как «границы коллапса» на столе «границы дна» и «высота линии» на TRs, и «ширина» на TDs

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 80%; margin: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;"> 
 
    <tbody> 
 
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;"> 
 
     <td style="width: 70%; font-weight: bold;">Dean</td> 
 
     <td style="width: 30%; text-align: right;">Joe Cool</td></tr> 
 
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;"> 
 
     <td style="width: 70%; font-weight: bold;">Senior Vice Dean</td> 
 
     <td style="width: 30%; text-align: right;">Jane Cool</td></tr> 
 
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;"> 
 
     <td style="width: 70%; font-weight: bold;">Vice Dean</td> 
 
     <td style="width: 30%; text-align: right;">John Doe</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

-1

<table border="0" cellpadding="0" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Dean</td> 
 
    </tr> 
 
    <tr> 
 
     <td><hr /></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jane</td> 
 
    </tr> 
 
    <tr> 
 
     <td><hr /></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Scott</td> 
 
    </tr> 
 
    <tr> 
 
     <td><hr /></td> 
 
    </tr> 
 
    
 
    </tbody> 
 
</table>

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